CSS text-shadow 属性

定義と使用方法

text-shadow 属性はテキストに影を設定します。

も参照してください：

CSS3 チュートリアル：CSS3 文本效果

HTML DOM リファレンスマニュアル：textShadow 属性

例

基本的なテキストの影効果：

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

実際に試してみる

ページの下部にさらに多くの例があります。

CSS 语法

text-shadow: h-shadow v-shadow blur color;

注釈：text-shadow 属性はテキストに1つまたは複数の影を追加します。この属性は、カンマで区切られた影のリストであり、各影には2つまたは3つの長さ値とオプションの色値が指定されます。省略された長さは0です。

属性値

値 説明 テスト
h-shadow 必須。水平の影の位置。負の値も許可。 テスト
v-shadow 必須。垂直の影の位置。負の値も許可。 テスト
blur オプション。ぼやけの距離。 テスト
color オプション。影の色。参照 CSS カラーバリュー。 テスト

技術的詳細

デフォルト値： なし
継承性： はい
バージョン： CSS3
JavaScript 言語： object.style.textShadow="2px 2px #ff0000"

さらに多くの例

ぼやけた効果のテキストの影
この例では、ぼやけた効果のテキストの影を示しています。
白いテキスト上の影
この例では、白いテキスト上のテキストの影を示しています。
ネオン効果のテキストの影
この例では、ネオン効果のテキストの影を示しています。

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
4.0 10.0 3.5 4.0 9.6