ホームページ > 記事 > ウェブフロントエンド > css3でタイトルに影を付けるコードは何ですか
css3でタイトルに影を付けるコードは何ですか
- WBOYオリジナル
- 2022-04-20 16:33:011607ブラウズ
コードは「タイトル要素 {text-shadow: 水平方向の影の位置、垂直方向の影の位置、ぼかし距離、影の色}」です。「text-shadow」属性はテキストに影を追加するために使用されます。この属性の影の位置 垂直方向の影の位置の値が負の値に設定されている場合、影の方向は x 軸の負の方向および y 軸の正の方向になります。
このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
css3タイトルに影を追加するコードは何ですか
text-shadow プロパティは影付きテキストに適用されます。
構文は次のとおりです:
text-shadow: h-shadow v-shadow blur color;
text-shadow プロパティは 1 つ以上のシャドウ テキストを接続します。プロパティはシャドウで、2 つまたは 3 つごとの長さの値と、オプションの色の値をカンマで区切って指定します。期限切れの長さは 0 です。
パラメータは次のように表現されます:
h-shadow は必須です。水平方向の影の位置。負の値も許可されます。
v-shadow 必須。垂直影の位置。負の値も許可されます。
ぼかし オプション。ぼやけた距離。
色 オプション。影の色。
例は次のとおりです:
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
h1 {text-shadow:2px 2px 8px #FF0000;}
</style>
</head>
<body>
<h1>Text-shadow with blur effect</h1>
<p><b>注意:</b>IE 9及更早版本的浏览器不支持 text-shadow 属性.</p>
</body>
</html>出力結果:
(学習ビデオ共有: css ビデオ チュートリアル )
以上がcss3でタイトルに影を付けるコードは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。