webmas.jp

text-shadow は文字に影を追加します。

値

none, 水平方向の距離 + 垂直方向の距離 + ぼかしの長さ + 色

初期値

none

対象

すべての要素

継承

する

CSS レベル

CSS 3（CSS Text Decoration Module Level 3）

値の詳細

値は3つの数値と色を続けて指定します。それぞれ順番に以下のような意味を持ちます。

水平方向の長さ

1つ目の指定。正数を指定すると右へ、負数を指定すると左へ影がオフセットされます。指定は必須です

垂直方向の長さ

2つ目の指定。正数を指定すると下へ、負数を指定すると上へ影がオフセットされます。指定は必須です

ぼかしの長さ

3つ目の指定。数値が大きいほどぼかしも大きくなります。省略可。規定値は0

色

色を指定します。省略可。省略した場合は Web ブラウザによって色が決定されます

サンプル

HTML

<p>CSS が有効の場合この文章には影が追加されます。</p>

CSS

p {
	text-shadow: 3px 3px 5px green;
}

プレビュー

CSS が有効の場合この文章には影が追加されます。