text-shadowで文字に影をつける【CSS】

text-shadowは文字に影をつけることができるプロパティです。

text-shadowプロパティでは影の距離やどれくらいぼかすのか、何色の影をつけるのかなどを指定することができます。

また、影はカンマ（,）で区切って複数指定できます。

text-shadowの指定方法

text-shadowプロパティでは、長さ・ぼかし半径・色について指定します。

長さ

noneを指定すると、影はつきません。

影の長さには数値と『CSSにおける長さ・大きさ・角度・時間の単位について【CSS】』に書いてあるような単位をつけて指定します。

また、影の長さには水平方向と垂直方向の2種類が必要で、先に水平方向の値を指定し、半角スペースで区切って垂直方向の値を記述します。

ぼかし半径

影をどれぐらいぼかすのか、単位つきの数値で指定します。

単位については、長さのときに紹介した記事を参考にしてください。

色

最後に影の色を指定することができます。

影の色はキーワードやカラーコードを使って指定します。

以下、使用例です。