CSS3 text-shadowプロパティの説明
2022-01-09 14:08:24
text-shadowプロパティには、以下の効果があります。
1.右下隅の陰影、左下隅の陰影、左上隅の陰影、右上隅の陰影
XML/HTMLコード
コンテンツをクリップボードにコピーする
- >
- < html ラング = "en" >
- < ヘッド >
- < メタ 文字セット = "UTF-8" >
- < タイトル > テキストシャドウ < タイトル >
- < スタイル >
- p{
- text-align:center。
- margin:0;
- font-family: helvetica,arial,sans-serif;
- color:#999。
- font-size:80px;
- font-weight:bold。
- text-shadow:10px 10px #333。
- }
- < スタイル >
- < ヘッド >
- < ボディ >
- < p > テキストシャドウ < p >
- < ボディ >
- < html >
テキスト効果は
テキストシャドウを: text-shadow:-10px 10px #333 に変更すると、左下が影になります。
text-shadow を: text-shadow:-10px -10px #333 に変更すると、左上隅に表示されるようになります。
text-shadow を text-shadow: 10px -10px #333 に変更すると、右上隅が表示されるようになります。
2. テキストシャドウを使って、立体的なテキスト効果を設定する
XML/HTMLコード
コンテンツをクリップボードにコピーする
- >
- < html ラング = "en" >
- < ヘッド >
- < メタ 文字セット = "UTF-8" >
- < タイトル > テキストシャドウ < タイトル >
- < スタイル >
- p{
- text-align:center。
- margin:0;
- font-family: helvetica,arial,sans-serif;
- color:#999。
- font-size:80px;
- font-weight:bold。
- text-shadow:-1px -1px #fff。
- 1px 1px #333。
- }
- < スタイル >
- < ヘッド >
- < ボディ >
- < p > テキストシャドウ < p >
- < ボディ >
- < html >
上記のCSS3 text-shadowプロパティの詳細は、私があなたと共有しているすべてです、私はそれがあなたに参照を与えることができる願っています、私はまた、あなたがスクリプトホームをサポートしています願っています。
関連
-
html webpack プラグインの使い方のチュートリアル
-
マウスホバーリング時に行(tr)全体のHTMLカラーを変更する。
-
Form formタグのEnctype属性の役割とその応用例を紹介します。
-
HTMLのスクロールバーについて/スクロールバーの削除について
-
html 固定タイトル列、タイトルヘッダーテーブル固有の実装コード
-
iframe を更新する方法に関する 3 つの実装オプション
-
htmlに要素href URLリンクの自動更新または新しいウィンドウを開く機能実装
-
HTML_Power Node Java Academyとは?
-
iframeのsrcの割り当て問題(サーバー側)
-
ブラウザーのURLの前に小さなアイコンを表示させる方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン