text-shadow

概要

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

それぞれの影はテキストに対するオフセットとして指定され、加えて任意で色とぼかしの半径を指定できます。

複数の影は手前から奥に適用され、最初に指定された影が上にきます・

このプロパティは ::first-line と ::first-letter のどちらの擬似要素にも適用されます。

構文

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black; 

/* color | offset-x | offset-y | blur-radius */
text-shadow: #CCC 1px 0 10px; 

/* offset-x | offset-y | color */
text-shadow: 5px 5px #558ABB;

/* color | offset-x | offset-y */
text-shadow: white 2px 5px;

/* offset-x | offset-y
/* Use defaults for color and blur-radius */
text-shadow: 5px 10px;

/* Global values */
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;

値

<color>

任意。オフセット値の前か後に指定できます。色が指定されなければ、UA が選んだ色が使われます。

註: ブラウザ間での一貫性を確保したい場合は、明示的に色を指定してください

<offset-x> <offset-y>

必須。これらの <length> 値はテキストに対する影のオフセットを指定します。<offset-x> は水平方向の距離を指定します。負の値であればテキストの左に影を配置します。 <offset-y> は垂直方向の距離を指定します。負の値であればテキストの上に影を配置します。両方の値が 0 ならば、影はテキストの背後に配置されます（もし <blur-radius> が設定されていれば、ぼかし効果が生成されるでしょう）。
取りうる単位は <length> を参照。

<blur-radius>

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

形式文法

none | <shadow-t>#
where 
<shadow-t> = [ <length>{2,3} && <color>? ]
where 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
where 
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

例

.red-text-shadow {
   text-shadow: red 0 -2px;
}

<p class="red-text-shadow">
   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.
</p>

.white-with-blue-shadow {
   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;
}

<p class="white-with-blue-shadow">
   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.
</p>

.gold-on-gold {
   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;
}

<p class="gold-on-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.
</p>

仕様

ブラウザ実装状況

[1] Gecko (Firefox) は理論上は無限個の影をサポートしています（試さないでください）。Gecko 2 以降はパフォーマンス上の理由からぼかしの半径を 300 に制限しています。<color> 値が無指定なら、Gecko は要素の color プロパティの値を使います。

[2] Opera はパフォーマンス上の理由から最大 6-9 個の text-shadows をサポートしています。ぼかしの半径は 100px までです。Opera 9.5-10.1 は古い（CSS2での、最初に定義された影が下にくる）逆順の描画順序に固執しています。

[3] Internet Explorer 5.5 は Microsoft の Shadow and DropShadow Filter をサポートしています。

[4] Safari: 明示的に色を指定しない影はすべて透明になります。Safari 1.1-3.2 がサポートする text-shadow は 1 つだけです（カンマ区切りのリスト内の最初の影を表示し、残りは無視します）。 Safari 4.0 (WebKit 528) 以降は複数の text-shadow をサポートしています。Konqueror は text-shadow を バージョン 3.4 からサポートし始めました。

関連情報

• box-shadow