CSS3

プロパティ

text-shadow

→●、mdn

テキストの影。

このプロパティは、要素のテキストに適用する影効果たちからなる、カンマで分離されたリストを受容する。各値は、box-shadow [CSS-BACKGROUNDS-3] に対するとき同様に解釈される（ただし、影の拡幅値と inset キーワードは許容されないことに注意）。各層は、［要素のテキストと そのすべてのテキスト装飾］を（組成したものを）影を付ける。影に色が指定されていない場合の既定は、currentcolor とする ― すなわち、影の色は要素の color プロパティからとられる。

none

[<color>? && <length>{2,3}]#

<length> は、<offset-x> および <offset-y> の値です。3 番目の値は任意で <blur-radius>。

開始<SPAN style="border:1px solid red;
 text-shadow:#f80 5px 10px;
">テスト</SPAN>終了

開始<SPAN style="border:1px solid red;
 text-shadow:#f80 5px 10px 3px;
">テスト</SPAN>終了

<offset-x>、<offset-y>

必須。これらの <length> 値はテキストに対する影のオフセットを指定します。

<offset-x> は水平方向の距離を指定します。負の値であればテキストの左に影を配置します。

<offset-y> は垂直方向の距離を指定します。負の値であればテキストの上に影を配置します。

両方の値が 0 ならば、影はテキストの真後ろに配置されますが、<blur-radius> の効果により一部だけが見えるかもしれません。

<blur-radius>

省略可。これは <length> 値です。指定されなければ、既定では 0 になります。この値が大きいほど、ぼかしは大きくなり、影は広く薄くなります。

影効果は、最初の影が最上層になるように、手前から奥の順に適用される。したがって影が成す層は、互いに重なることはあっても、テキストが成す層の上に重ねられることは決してない。影は［要素のボーダーや背景（もしあれば）］と［要素のテキストやテキスト装飾］の合間にある積層レベルに塗るものとする。
ユーザー エージェントは、テキスト影を［積層文脈の同じ積層レベルに属している隣接する要素］内のテキストの上に塗らないようにするべきである。（これは、その影の正確な積層レベルが、要素がボーダーや背景を持つかどうかに依存し得ることを意味する ― したがって、テキスト影を積層するときの正確なふるまいはユーザー エージェントにより定義される）。
所与の影層が、各グリフや装飾を独立に影を付けるのか、テキストや装飾を平坦化してから影を付けるのかは、未定義である。

box-shadow と違って、テキスト影は、影が付けられた形状で切り取られない。また、テキストが半透明ならば、透過し得る。box-shadow と同様に、テキスト影は、レイアウトに波及することはなく、スクロール処理を誘発したり スクロール可能な過フロー区画のサイズを増やすこともない。

注記： ここに定義される影の塗り順序は、1998 年の CSS2 勧告 による定義の反対である。

text-shadow プロパティは ::first-line／::first-letter 疑似要素にも適用される。

関連

box-shadow。

テスト