text-shadow

概要

text-shadow CSS プロパティは、要素のテキストと text-decoration に適用する、影効果をコンマくぎりのリストとして指定できます。

• 初期値: none
• 適用対象: 全ての要素
• 継承: する
• パーセント値: n/a
• メディア: visual
• 計算値: 色と 3 つの長さ

構文

text-shadow: none | [<shadow>,]* <shadow>

  ただし <shadow> の定義は以下のとおり:

[ <color>? <offset-x> <offset-y> <blur-radius>? | <offset-x> <offset-y> <blur-radius>? <color>? ]

値

<color>

任意。<length> の前か後ろ。もし <color> が指定されなければ、UA が選んだ色が使われます。Gecko/Firefox は要素の color プロパティの値を使います。他のブラウザは違うかもしれません。

註: ブラウザ互換性のために色を指定してください。

<offset-x> <offset-y>

必須。取りうる単位は <length> を参照。
この <length> は影のズレを指定します。1 番目の <offset-x> は水平方向の距離を指定します。負の値であればテキストの左に影を配置します。2 番目の <offset-y> は垂直方向の距離を指定します。負の値であればテキストの上に影を配置します。両方の値が 0 ならば、影はテキストの背後に配置されます (もし 3 番目の <length> が設定されていれば、ぼかし効果が生成されるでしょう)。

<blur-radius>

任意。ぼかしの半径を指定する <length> 値です。指定されなければ、これは 0 になります。この値が大きいほど、ぼかしは大きくなり、影は広く薄くなります。

例

text-shadow: orange 0 -2px;

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
color: white;
font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

text-shadow: rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px,
             rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px,
             rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px; 
color: gold;
background: gold;

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

仕様

注意: text-shadow は CSS2 で不適切に定義され、CSS2.1 で削除されました。CSS3 Text 仕様は構文を改善しました。その後新しい草案 CSS Text Decoration Module Level 3 に移動しました。

ブラウザ実装状況

• Gecko (Firefox) は理論上は無限個の影をサポート (試さないでください！) し、CSS3 の描画順序を守っています (最初に定義された影が 上 にきます)。
  Gecko 2 以降はパフォーマンス上の理由からぼかしの半径を 300 に限定しています。
  <color> 値が無指定なら Gecko は要素の color プロパティの値を使います。
• Opera はパフォーマンス上の理由から最大 6-9 個の text-shadows をサポートしています。ぼかしの半径は 100px までです。
  Opera 9.5-10.1 は CSS2 の描画順序を守っています (最初に定義された影が 下 にきます)。
• Internet Explorer 5.5 は Microsoft の Shadow and DropShadow Filter をサポートしています。
• Safari: 明示的に色を指定しない影はすべて透明になります
  Safari 1.1-3.2 がサポートする text-shadow は 1 つだけです（カンマ区切りのリスト内の最初の影を表示し、残りは無視します）。
  Safari 4.0 (WebKit 528) 以降は複数の text-shadow をサポートします。
• Konqueror は text-shadow を バージョン 3.4 からサポートし始めました。

関連情報

• box-shadow