text-shadow：文字に影をつける

適用対象	全ての要素
継承	しない

text-shadowプロパティは、文字に影を付ける効果があります。当初Macのブラウザ「Safari」のみ対応していましたが、最新のバージョンでは他のブラウザでも実装が進んでいるようです。

影効果がボックスの大きさを変える事はありませんが、効果がボックスの領域外に及ぶ事はあります。

text-shadowに与えられる値

text-shadow: none;: 影効果を付けません。
text-shadow: 数値で指定する;: [px]や[em]などの数値で、要素と影の距離を指定します。1つ目の値は右へずらす距離、2つ目の値は下へずらす距離を指定し、それぞれマイナス値を付ければ逆にずらす事が出来ます。3つ目の値で影のぼかし範囲を指定します。更に影の色を指定する事も出来ます。
【例】.kage { text-shadow: 3px 3px 5px red }

text-shadowの使用サンプル

CSS

.text_sample01 {
 text-shadow: 3px 3px;
 background-color:#EEEEEE;
 padding: 10px;
 margin: 0px 0px 10px 0px;
}
.text_sample02 {
 text-shadow: 0.5em 0.5em 5px #0000aa;
 background-color:#EEEEEE;
 padding: 10px;
}

XHTML

<div class="text_sample01">
text_sample01 [text-shadow: 3px 3px;]<br />
テキストサンプル、テキストサンプル。<br />
</div>
<div class="text_sample02">
text_sample02 [text-shadow: 0.5em 0.5em 5px #0000aa;]<br />
テキストサンプル、テキストサンプル。<br />
</div>

表示確認

text_sample01 [text-shadow: 3px 3px;]
テキストサンプル、テキストサンプル。

text_sample01 [text-shadow: 0.5em 0.5em 5px #0000aa;]
テキストサンプル、テキストサンプル。

text-shadowに関連するCSSプロパティ

テキスト関連
text-align	内包する要素に対して横位置の揃え方を指定する
text-align-last	内包する要素の最終行に対して横位置の揃え方を指定する
text-autospace	アルファベット等との間隔を指定
text-combine-horizontal	文字を縦書き表示にした際に縦中横のレイアウトにする
text-combine-mode	縦書き表示で縦中横のレイアウトにした文字の表示方法を指定する
text-decoration	文字列に装飾線や点滅を指定する
text-decoration-color	文字の装飾線の色を指定する
text-decoration-line	文字の装飾線の位置を指定する
text-decoration-skip	文字の装飾線について除外する対象を指定する
text-decoration-style	文字の装飾線の種類を指定する
text-emphasis	要素内のテキストに付与する強調マークに関する指定を行う
text-emphasis-color	要素内のテキストに付与する強調マークの色を指定する
text-emphasis-position	要素内のテキストに付与する強調マークの位置を指定する
text-emphasis-style	要素内のテキストに強調マークを付与する
text-height	テキストの高さを指定する
text-indent	文章のインデント幅を指定する
text-justify	行の両端揃えの方法を指定する
text-orientation	縦書き文章の文字の表示方向に関して指定する
text-overflow	要素からはみ出した文字を省略する
text-shadow	文字に影（ドロップシャドウ）を付ける
text-transform	テキストの大文字表示・小文字表示を指定する
text-underline-position	テキストのアンダーラインの位置を指定する