text-shadowプロパティは、テキストに影をつける際に使用します。
text-shadowプロパティでは、スペース区切りで<水平方向の距離> <垂直方向の距離> <影のぼかし半径> <影の色>を指定することができます。
長さの値には、pxやemやexなどの単位が利用できます。
１番目の長さの値は、水平方向の影のオフセット距離を表します。
正の値を指定すると右へ、負の値を指定すると左へ影が移動します。
２番目の長さの値は、垂直方向の影のオフセット距離を表します。
正の値を指定すると下へ、負の値を指定すると上へ影が移動します。
３番目の長さの値は省略可能ですが、指定した場合には影のぼかし半径を表します。
ぼかし半径が指定されない場合はゼロとなります。
尚、ぼかし半径とは、ぼかし効果の境界までの距離のことですが、ぼかし効果を計算する厳密なアルゴリズムは定義されていません。
色の値は省略可能ですが、指定した場合には影の色を表します。長さの値の前か後に任意で指定します。
色の値が指定されない場合には、ブラウザが選択した色が使用されます。
上記の値のセットをカンマ（ , ）で区切って、複数の影を指定することもできます。
影は、他のテキスト装飾が適用されるのと同じように、要素のすべてのテキストに適用されます。
指定の仕方によっては影同士が重なり合うかもしれませんが、テキスト自身の上に覆われることはありません。
また、ボックスからはみだして影が表示されることがありますが、ボックスのサイズ自体が変わることはありません。
ボックスに影をつける場合には、box-shadowプロパティを使用します。
h1.sample1 {text-shadow: 5px 5px 2px blue;}
h1.sample2 {text-shadow: 5px 5px 2px blue , -5px -5px 1px red;}
<html>
<head>
<link rel=”stylesheet” href=”sample.css”
type=”text/css”>
</head>
<body>
<h1 class=”sample1″>text-shadowの使用例１</h1>
<h1 class=”sample2″>text-shadowの使用例２</h1>
</body>
</html>
