text-shadowプロパティ

text-shadowプロパティは、テキストに影を付けます。 値として、スペースで区切った4つのパラメータ、 または、影を完全に取り消す（これがデフォルト値）キーワード noneを指定します。

構文

cssセレクタ {
  text-shadow: X軸方向の移動量 Y軸方向の移動量 ぼかし半径 色;
}

cssセレクタ {
  text-shadow: none;
}

パラメータ

X軸・Y軸方向の移動量およびぼかし半径は、パーセントを除く サイズの単位で指定します。

例

影を下方向・右方向に移動させ、少しぼかしてみましょう：

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-shadow: 5px 5px 3px black;
}

Результат:

例 . くっきりした影

今度は、影の色を赤にして、下方向・右方向に移動させますが、ぼかしは取り除いてみます。影はくっきりとしたものになります：

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-shadow: 10px 10px red;
}

Результат:

例 . 均一な影

今回は、影の位置は移動させずに、ぼかしだけを加えてみます：

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-shadow: 0px 0px 3px black;
}

Результат:

関連項目