CSStext -shadowプロパティ

基本的なテキストシャドウ：

h1 {
text-shadow: 2px 2px #ff0000;
}

以下の「自分で試してみてください」の例をもっと見てください。

定義と使用法

プロパティは、text-shadowテキストに影を追加します。

このプロパティは、テキストに適用されるシャドウのコンマ区切りリストを受け入れます。

デフォルト値：	なし
遺伝性の：	はい
アニメート可能：	はい。アニメート可能について読む
バージョン：	CSS3
JavaScript構文：	object .style.textShadow = "2px 5px 5px red"

表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。

Property
text-shadow	4.0	10.0	3.5	4.0	9.6

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

注：テキストに複数の影を追加するには、影のコンマ区切りリストを追加します。

Value	Description	Play it
h-shadow	Required. The position of the horizontal shadow. Negative values are allowed
v-shadow	Required. The position of the vertical shadow. Negative values are allowed
blur-radius	Optional. The blur radius. Default value is 0
color	Optional. The color of the shadow. Look at CSS Color Values for a complete list of possible color values
none	Default value. No shadow
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

ヒント： 許可される値（CSSの長さの単位）についてもっと読む

ぼかし効果のあるテキストシャドウ：

h1 {
text-shadow: 2px 2px 8px #FF0000;
}

白いテキストのテキストシャドウ：

h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}

赤いネオンの輝きを持つテキストシャドウ：

h1 {
text-shadow: 0 0 3px #FF0000;
}

赤と青のネオンの輝きを持つテキストシャドウ：

h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}