最終更新日:
公開日:
リファレンス
CSS
テキスト シャドウ
text-shadowプロパティ
テキストに影をつけるプロパティです。
-
初期値
none
-
継承
継承あり
-
適用できる要素
全要素
値
プロパティの値は「x軸の位置(offset-x)」「y軸の位置(offset-y)」「影の広さ(blur-radius)」「影の色(color)」を指定することができます。
パターン1
「x軸の位置」「y軸の位置」「影の広さ」「色」の順に指定した例です。
CSSコード例
p {
text-shadow: 0px 0px 5px #555;
}
text-shadowの表示例
パターン2
パターン1と順序を変え、「色」「x軸の位置」「y軸の位置」「影の広さ」の順に指定した例です。
CSSコード例
p {
text-shadow: #555 0px 5px 3px;
}
text-shadowの表示例
パターン3
「影の広さ」は省略することが可能です。次のCSSでは、「x軸の位置」「y軸の位置」「色」の順に指定しています。
CSSコード例
p {
text-shadow: 0 5px #5bb4e9;
}
text-shadowの表示例
パターン4
「,(コンマ)」で区切ることで、複数の影を指定することが可能です。
CSSコード例
p {
text-shadow: 5px 5px 1px #f0d128, 10px 10px 1px #2484bf, 15px 15px 1px #0a4d76, -10px -10px 1px #f52556;
}
text-shadowの表示例
こちらの記事は役に立ちましたか?
コメントありがとうございます!
運営の参考にさせていただきます。
ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。