CSSのtext-shadowプロパティ

提供:Dev Guides
移動先:案内検索

CSS text-shadowプロパティはbox-shadowプロパティに似ていますが、要素の境界ではなく、各文字に影が適用されます。

text-shadow: 2px 2px 1px rgba(0,0,0,0.4);

値はoffset-x offset-y blur-radius colorの順になります。

複数のシャドウを定義することもできます。

text-shadow: 45px 25px 4px rgb(25,93,229),
             25px 15px 1px rgb(25,93,229);

は、box-shadowプロパティと同様に、複数のコンマ区切りのシャドウを定義できることに注意してください。 ただし、box-shadowとは異なり、スプレッド値を定義したり、テキストシャドウにinsetキーワードを使用したりすることはできません。 はめ込み影のように見えるテキスト影を作成する方法はいくつかありますが、影自体は実際にははめ込まれません。


結果

上記のスニペットの2つのテキストシャドウの結果は次のとおりです。

私は基本的な影のある世界のテキストです。

私は2つの影のある世界のテキストです。