text-shadow

Updated / Published

text-shadowプロパティは要素内のテキストに対して影の効果を付けることができます。コンマ（,）で区切って複数の影を付けることもできます。このプロパティは影の大きさがボックスの大きさ自体に影響を与えることはありませんが、ボックスの範囲を超えて表示されることがあるので注意が必要です。影の位置の指定（1番目と2番目の長さ）は必須で、影のぼかし範囲（3番目の長さ）と影の色は任意指定です。

text-shadowプロパティはCSS2で定義されましたが、CSS2.1仕様では一旦削除され、CSS3仕様で新たに定義されています。

値
初期値
none
適用対象
すべての要素
継承
しない
メディア
visual

text-shadowプロパティの値

text-shadowプロパティの値には影効果を付けない "none"（初期値）、または "<長さ> <長さ> <長さ>? <色>?" の形式で影効果を指定できます。<長さ> は "em", "px" などの単位識別子を伴う数値で指定し、<色> はRGB値やカラーネームなどで指定します。また、コンマ（,）で区切ることで複数の影効果を付けることもできます。

  • 1番目の長さの値にテキストに対する影の左右方向の位置を指定する。正の値を指定すると左側に、負の値を指定すると右側にずらす。
  • 2番目の長さの値にテキストに対する影の上下方向の位置を指定する。正の値を指定すると下側に、負の値を指定すると上側にずらす。1番目と2番目の値が 0 ならば、影はテキストの背後に配置されます。
  • 3番目の長さの値に影のぼかし範囲を指定する（任意指定）。3番目の長さの指定がない場合は、0 になり、ぼかし効果はない。この値が大きいほど、ぼかしは大きくなり、影は広く薄くなります。
  • 2つ、または3つ（3番目の長さは任意）の長さを指定した後、その長さを指定している前後のどちらかに "<長さ> <長さ> <長さ>? <色>?"、または "<色>? <長さ> <長さ> <長さ>?" の形式で影の色を指定することができます（任意指定）。

text-shadowプロパティの実装状況

IE
◯：IE10+（IE9以下は対応していません）
Firefox
◯
Opera
◯
Chrome
◯
Safari
◯
iOS
◯
Android
◯

サンプル

h2 {
text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
color: white;
}