HTML5 と CSS を使用してテキストのシャドウ効果を実現します

2 日前、HTML5 フロントエンドを学んでいるかわいい女の子が、テキストの影の効果を実現する方法について私に質問しました。彼女は text-shadow についても私に話してくれましたが、実際には、CSS3 の新機能は非常に強力なので、考えを制限しすぎないでください。さて、ゴシップです。早速、このテキストシャドウを見てみましょう。

text-shadow テキスト シャドウ パラメータ: パラメータ 1: 最初の長さの値は、オブジェクトのシャドウの水平オフセット値を設定するために使用されます。負の値も可能です。 パラメータ 2: 2 番目の長さの値は、オブジェクトの影の垂直オフセット値を設定するために使用されます。負の値も可能です。 パラメータ 3: 3 番目の長さの値が指定されている場合、オブジェクトのシャドウ ブラー値を設定するために使用されます。負の値は許可されません パラメータ 4: オブジェクトの影の色を設定します

テキストシャドウ: 10px 10px 50px #000;

上の図の効果を実現するにはどうすればよいでしょうか?

HTML 構造 CSS スタイル フォント スタイル フォントの色 テキスト シャドウ 次に、具体的なコードを見てみましょう。

HTML:

 <div class=text>[千の気性] 尚学堂</div>

CSS:

 .text{ font:bold 100px/1.5 'Microsoft Yahei'; color: dodgerblue;/*text-shadow*/ text-shadow: 10px 10px 50px #000; /*text-shadow: 10px 10px 50px #000,-10px - 10 ピクセル 50 ピクセル #f00;*/}

それでは、フロントエンドで私に尋ねる小さな美しさのエフェクトを実行する方法を見てみましょう。

実際はとても簡単です。コードに直接進みましょう~

HTML:

 <div class=text>[千の気性] 尚学堂</div>

CSS:

 body { 背景: #000; カラー: #fff;}.text{ font: 太字 100px/1.5 georgia, sans-serif;/*異なる色、複数の異なる値のぼかしサイズ*/ text-shadow: 0 0 10px #fff 、0 0 20px #fff、0 0 30px #fff、0 0 40px #ff00de、 0 0 70px #ff00de、0 0 80px #ff00de、0 0 100px #ff00de、0 0 150px #ff00de;}

実際、CSS3 スタイルは非常に興味深いものであり、ほんの少し変更するだけで非常に素晴らしい効果が得られることがあります。

上記は、HTML5 と CSS を使用してテキストのシャドウ効果を実現するためのエディターの紹介です。ご質問があれば、メッセージを残してください。エディターがすぐに返信します。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！