CSSのbox-shadowプロパティの使用方法

1. 単一の影の追加: 要素に単一の影を追加するには、以下のようなコードを使用します。

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

この例では、要素に2pxの水平オフセット、2pxの垂直オフセット、4pxのぼかし半径、および透明度0.2の黒い影が追加されます。

2. 複数の影の追加: 要素に複数の影を追加するには、コンマで区切って複数のbox-shadow値を指定します。以下の例を参考にしてください。

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

この例では、要素に2つの影が追加されます。1つ目の影は黒色で、2pxの水平オフセット、2pxの垂直オフセット、4pxのぼかし半径、および透明度0.2を持ちます。2つ目の影は白色で、-2pxの水平オフセット、-2pxの垂直オフセット、4pxのぼかし半径、および透明度0.2を持ちます。

3. 内側の影の追加: 要素に内側の影を追加するには、insetキーワードを使用します。以下の例をご覧ください。

.box {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}

この例では、要素の内側に10pxのぼかし半径を持つ透明度0.1の黒い影が追加されます。

これらはbox-shadowプロパティのいくつかの使用例です。他にもさまざまなパラメータや値の組み合わせを使用することで、さまざまな影の効果を作成することができます。詳細な情報やさらなるコード例については、CSSの公式ドキュメントを参照してください。