影

CSS を使用すると、影の効果を作成できます。

私の上にカーソルを合わせてください！

CSS シャドウ効果

CSSを使用すると、テキストや要素に影を付けることができます。

これらの章では、次のプロパティについて学習します。

• text-shadow
• box-shadow

CSSテキストの影

CSStext-shadowプロパティはテキストに影を適用します。

最も単純な使用法では、水平の影(2px)と垂直の影(2px)のみを指定します。

文字の影効果！

次に、影に色を追加します。

文字の影効果！

次に、影にぼかし効果を追加します。

文字の影効果！

次の例は、黒い影付きの白いテキストを示しています。

文字の影効果！

次の例は、赤いネオングローシャドウを示しています。

文字の影効果！

複数の影

テキストに複数の影を追加するには、カンマ区切りの影のリストを追加します。

次の例は、赤と青のネオングローシャドウを示しています。

文字の影効果！

次の例は、黒、青、濃い青の影が付いた白いテキストを示しています。

文字の影効果！

text-shadowプロパティを使用して、テキストの周りにプレーンな境界線を作成することもできます(影なし):

テキストの周りに枠を！