CSSを使用したシャドウの追加方法

1. box-shadowプロパティを使用する方法:

box-shadowプロパティは、要素の周囲にシャドウを追加するために使用されます。以下のように使用します:

.box {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

上記の例では、要素に2ピクセルの水平オフセット、2ピクセルの垂直オフセット、4ピクセルのぼかし半径、および透明度0.2の黒いシャドウが追加されます。

2. text-shadowプロパティを使用する方法:

text-shadowプロパティは、テキスト要素にシャドウを追加するために使用されます。以下のように使用します:

.text {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

上記の例では、テキストに1ピクセルの水平オフセット、1ピクセルの垂直オフセット、2ピクセルのぼかし半径、および透明度0.3の黒いシャドウが追加されます。

3. 複数のシャドウを追加する方法:

要素に複数のシャドウを追加することもできます。以下は例です:

.box {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2),
              4px 4px 6px rgba(0, 0, 0, 0.3);
}

上記の例では、要素に2つのシャドウが追加されます。最初のシャドウは2ピクセルの水平オフセット、2ピクセルの垂直オフセット、4ピクセルのぼかし半径、および透明度0.2の黒いシャドウです。2番目のシャドウは4ピクセルの水平オフセット、4ピクセルの垂直オフセット、6ピクセルのぼかし半径、および透明度0.3の黒いシャドウです。

これらの方法を使用して、要素にシャドウを追加することができます。必要に応じて値を調整し、デザインに適したシャドウ効果を作成してください。