CSSのtext-shadowプロパティ
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つの影のある世界のテキストです。