CSSシャドウの使い方

1. テキストシャドウの追加: テキストにシャドウを追加するには、text-shadowプロパティを使用します。以下の例では、黒いテキストに白いシャドウを追加しています。

h1 {
  text-shadow: 2px 2px 4px white;
}

2. 要素全体のボックスシャドウの追加: 要素全体にボックスシャドウを追加するには、box-shadowプロパティを使用します。以下の例では、要素に灰色のシャドウを追加しています。

div {
  box-shadow: 0px 0px 10px gray;
}

3. 複数のシャドウの追加: 複数のシャドウを追加することもできます。以下の例では、要素に2つのシャドウを追加しています。

button {
  box-shadow: 2px 2px 4px gray, -2px -2px 4px lightgray;
}

4. シャドウの色やぼかしの調整: シャドウの色やぼかしの効果を調整することもできます。以下の例では、要素に青いシャドウを追加し、ぼかしの効果を強めています。

img {
  box-shadow: 0px 0px 10px blue;
  filter: blur(4px);
}

これらはいくつかの基本的なCSSシャドウの使い方の例です。さまざまなプロパティや値を使ってシャドウをカスタマイズすることができます。ぜひ試してみてください！