text-shadow

text-shadowは、文字に影を指定するスタイルです。

解説

文字に影を付けたいときに使用します。
１つめの値と２つめの値で、影を表示する位置を文字からの相対位置で指定します。
３つめの値で影をどれだけぼかすかを指定します。ぼかしが不要の場合はこの値は省略可です。
４つめの値（ぼかしの値を省略した場合は３番目の値）で影の色を指定します。

構文は以下になります。

(明示的に影を表示しない場合) 　text-shadow: none; (影の位置を色を指定する場合) 　text-shadow: 値1 値2 値4 (影の位置とぼかしと色を指定する場合) 　text-shadow: 値1 値2 値3 値4;

text-shadowには以下の値が指定できます。

値	説明
値１	影の位置（X方向）を数値と単位で指定（例）2px、1emなど
値２	影の位置（Y方向）を数値と単位で指定（例）2px、1emなど
値３	ぼかしのサイズを数値と単位で指定（例）2px、1emなど
値４	影の色を指定（例）blue、#0000ff など
none	明示的に影を表示しない指定（デフォルト値）（例）text-shadow:none;

太字の値は初期値です。


.sample01 {
  text-shadow:3px 3px 1px #0000ff;
}


<div class="sample01">あいうえおかきくけこ</div>

あいうえおかきくけこ


.sample02 {
  text-shadow:2px 2px 2px #ff0000;
}


<div class="sample02">あいうえおかきくけこ</div>

あいうえおかきくけこ


.sample03 {
  text-shadow:2px 2px gray;
}


<div class="sample03">あいうえおかきくけこ</div>

あいうえおかきくけこ


.sample04 {
  text-shadow:none;
}


<div class="sample04">あいうえおかきくけこ</div>

あいうえおかきくけこ