CSSリファレンスマニュアル

CSS@ルール(RULES)

text-shadow CSS属性は、1つまたは複数のテキストの影効果を要素のテキスト内容に適用します。各テキストの影効果は、影響偏移量を指定しなければなりませんが、ぼかし半径や影の色を指定することもできます。

以下の表は、この属性の使用方法とバージョン履歴、およびjavascriptスクリプトでの属性の使用文法を示しています。

デフォルト値：	none
適用範囲：	すべての要素に適用されます。また::firstに適用されます。-letterおよび::first-line。
継承：	は
アニメーション可能：	です。参照してくださいアニメーション属性。
バージョン：	CSS3の新機能
JavaScript文法：	object.style.textShadow="2px 2px #ff0000"

この属性の構文は以下の通りです：

text-shadow:　shadow1　,　shadow2,　...　shadowN]　|　none　|　inherit　
　　　　　　　　　　　　　where　shadow　is:　[offset-x　offset-y　blur-radius　color]

以下の例では、text-shadow属性。

例

　　h1　{
　　　text-shadow:　2px　2px　5px　#000;
　　}
　　p　{
　　　text-shadow:　1px　1px　2px　rgba(0,0,0,0.5);
　　}

注意：2つの影のオフセット値がすべて0に設定されている場合、影はテキストの後ろに配置され、指定されたぼかし半径でぼかし効果が発生する可能性があります。

以下のテーブルはこの属性の値を説明しています。

値	説明
必要 -この属性には以下の値を指定する必要があります。
h-shadow	水平影の位置を指定する必要があります。負の値を許可します。
v-shadow	垂直影の位置を指定する必要があります。負の値を許可します。
オプション -以下の値はオプションです。
blur	ぼかしの大きさを指定します。
color	影の色を指定します。参照してください。CSS色値を使用して、可能な色値リストを取得します。
inherit	指定された場合、関連する要素は親要素のtext-shadowの属性値。

text-shadow属性のブラウザの互換性、以下のテーブルの数字は、この属性をサポートするブラウザの最低バージョン番号を示します；すべての主要ブラウザはこの属性をサポートしています。

	Firefox 3。5+ Google Chrome2+ Internet Explorer 10+ Apple Safari 1。1+ Opera 9。5+

警告： Internet Explorer 7およびより古いバージョンでは値の継承がサポートされていません。IE8継承がサポートされていますが、<!DOCTYPE>。IE9継承がサポートされています。

以下のチュートリアルを参照してください：CSS Text。