CSS3 text-shadow プロパティ

❮ 前章へ 完全な CSS リファレンス 次へ ❯

例

基本的な text-shadow：

h1 {
    text-shadow: 2px 2px #ff0000;
}
Try it Yourself ❯

他の "Try it Yourself" 例が下にあります。

定義と用法

text-shadow プロパティは、テキストへ影を加えます。

このThis property accepts a comma-separated list of shadows to be applied to the text.

デフォルト値： none
継承： 継承する
アニメーション可否： 可。animatable を参照 Try it
バージョン： CSS3
JavaScript 構文： object.style.textShadow="2px 5px 5px red" Try it

ブラウザ・サポート

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

プロパティ
text-shadow 4.0 10.0 3.5 4.0 9.6

CSS 構文

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

注: テキストに 1 つ以上の影を加えるためには、カンマで区切った影のリストを追加します。

プロパティの値

値 説明 Play it
h-shadow 必須。横方向の影の位置。負の値が使用できます Play it ❯
v-shadow 必須。縦方向の影の位置。負の値が使用できます Play it ❯
blur-radius 任意。ぼかしの半径。デフォルト値は 0 です Play it ❯
color 任意。影の色。指定可能な色値の完全なリストについては、 CSSの色値を参照してください Play it ❯
なし デフォルト値。No shadow Play it ❯
initial プロパティにデフォルト値を設定します。initial を参照 Play it ❯
inherit このプロパティは親要素を継承します。inherit を参照
Examples

その他の例

例

この例は、ぼかし効果を持つテキストの影のデモです：

h1 {
    text-shadow: 2px 2px 8px #FF0000;
}
Try it Yourself ❯

例

この例は、白色のテキストにテキストの影をを付けるデモです：

h1 {
    color: white;
    text-shadow: 2px 2px 4px #000000;
}
Try it Yourself ❯

例

この例は、赤いネオン光を持つテキストの影のデモです：

h1 {
    text-shadow: 0 0 3px #FF0000;
}
Try it Yourself ❯

例

この例は、赤と青のネオン光を持つテキストの影のデモです：

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

関連ページ

CSS3 チュートリアル：CSS3 Text Effects

HTML DOM リファレンス：textShadow プロパティ


❮ 前章へ 完全な CSS リファレンス 次へ ❯