最終更新日
text-shadowは、文字に影を付けるプロパティです。指定した影は、要素内のすべての文字へ適用されます。
影の設定は、2~3個の長さの値を半角スペースで区切って指定します。
・1個目の値は、水平方向への影の長さを指定。正の値は右方向へ、負の値は左方向への距離(省略不可)
・2個目の値は、垂直方向への影の長さを指定。正の値は下方向へ、負の値は上方向への距離(省略不可)
・3個目の値は、影のぼかし範囲を指定。値が大きいほど影の端がぼやける(省略可能)
任意で「色」を指定できます。色の値は、colorプロパティを参照してください。色の指定を省略するとブラウザの設定色になります。
影の値は、カンマで区切って複数指定することも可能です。その場合は、最初に指定した影の層が一番上に配置され、次の影はそれぞれその下へ順に配置されます。
ボックスに影をつける場合は、box-shadowを使用します。
初期値 | 適用先 | 継承 |
---|---|---|
none | すべての要素 | あり |
値 | 説明 |
---|---|
長さの値 | 影の長さなどを「px」や「em」で指定します。 |
色の値 | 色の指定を省略するとブラウザの設定色になります。 |
none | 文字に影を付けません。(初期値) |
text-shadow: 5px 5px; text-shadow: 5px 5px 5px; text-shadow: 5px 5px 5px #f00; text-shadow: 5px 5px 5px rgba(0,0,0,0.5); text-shadow: 5px 5px 5px #f00, 7px 7px 7px #00f;