text-shadow

仕様

初期値	none
適用対象	すべての要素と生成コンテンツ
値の継承	する

設定できる値

スペース区切りで<左右の距離> <上下の距離> <ぼかしの半径> <影の色>を指定する。
<ぼかしの半径>と<影の色>は省略可です。

text-shadow:	15px	15px	5px	rgba(0, 0, 0, 0.8);
	<左右の距離>	<上下の距離>	<ぼかしの半径>	<影の色>

<左右の距離>

テキストを起点に正の数の場合は右へ、負の数の場合は左へずれてテキストシャドウを表示します。

サンプルコード

text-shadow: 15px 15px 2px rgba(50, 205, 50, 0.8);

<上下の距離>

テキストを起点に正の数の場合は下へ、負の数の場合は上へずれてテキストシャドウを表示します。

サンプルコード

text-shadow: 15px 15px 2px rgba(50, 205, 50, 0.8);

<ぼかしの半径>

省略可能な値（省略した場合は「0」を設定したのと同じ見た目になります）
<ぼかしの半径>は負の値を指定することはできません。

指定した場合のサンプルコード

text-shadow: 15px 15px 2px rgba(50, 205, 50, 0.8);

<影の色>

省略可能な値（省略した場合はフォントに指定されている「color」が継承されます）
色の指定は16進数、rgb()、rgba()、hsl()、hsla()、ブラウザで定義されている色の名前などで指定可能です。

指定した場合のサンプルコード

text-shadow: 15px 15px 2px rgba(255, 0, 0, 0.8);

サンプルコード

16進数のサンプルコード

text-shadow: 15px 15px 5px #32CD32;

rgb()のサンプルコード

text-shadow: 15px 15px 5px rgb(50, 205, 50);

rgba()のサンプルコード

text-shadow: 15px 15px 5px rgba(50, 205, 50, 1);

色の名前

text-shadow: 15px 15px 5px LimeGreen;

その他

指定する値を「,」で区切り、複数の影を付けることも可能です。

複数指定した場合

text-shadow: 15px 15px 2px rgba(0, 0, 0, 1), 5px 25px 5px rgba(201, 32, 201, 0.8), -15px -15px 8px rgba(46, 217, 46, 0.5);