HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

テキスト シャドウ

text-shadowプロパティ

テキストに影をつけるプロパティです。

  • 初期値

    none

  • 継承

    継承あり

  • 適用できる要素

    全要素

プロパティの値は「x軸の位置(offset-x)」「y軸の位置(offset-y)」「影の広さ(blur-radius)」「影の色(color)」を指定することができます。


パターン1

「x軸の位置」「y軸の位置」「影の広さ」「色」の順に指定した例です。

CSSコード例

p {
	text-shadow: 0px 0px 5px #555;
}

表示例:

text-shadowの表示例


パターン2

パターン1と順序を変え、「色」「x軸の位置」「y軸の位置」「影の広さ」の順に指定した例です。

CSSコード例

p {
	text-shadow: #555 0px 5px 3px;
}

表示例:

text-shadowの表示例


パターン3

「影の広さ」は省略することが可能です。次のCSSでは、「x軸の位置」「y軸の位置」「色」の順に指定しています。

CSSコード例

p {
	text-shadow: 0 5px #5bb4e9;
}

表示例:

text-shadowの表示例


パターン4

,(コンマ)」で区切ることで、複数の影を指定することが可能です。

CSSコード例

p {
	text-shadow: 5px 5px 1px #f0d128, 10px 10px 1px #2484bf, 15px 15px 1px #0a4d76, -10px -10px 1px #f52556;
}

表示例:

text-shadowの表示例

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。