CSSで全辺にボックスシャドウを追加する方法

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

.box {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

上記のコードでは、boxクラスを持つ要素に対して、水平方向と垂直方向のオフセットを0に設定し、ぼかしの半径を5pxに設定しています。また、ぼかしの色は黒色（rgba(0, 0, 0, 0.5)）に設定されています。必要に応じてこれらの値を調整してください。

方法2: border-imageプロパティを使用する方法

.box {
  border: 1px solid transparent;
  border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
  border-image-slice: 1;
}

上記のコードでは、boxクラスを持つ要素に対して、透明な1pxのボーダーを設定し、ボーダーイメージとして縦方向にグラデーションを指定しています。グラデーションの色は黒色（rgba(0, 0, 0, 0.5)）に設定されています。border-image-sliceプロパティは、ボーダーイメージのスライス範囲を指定するために使用されています。

方法3: :beforeまたは:after疑似要素を使用する方法

.box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

上記のコードでは、boxクラスを持つ要素の前に疑似要素（::before）を追加し、その疑似要素に対して全面にボックスシャドウを設定しています。必要に応じてシャドウの色やオフセットを調整してください。

これらはいくつかの一般的な方法ですが、ボックスシャドウを要素に追加する別の方法もあります。デザインに応じて適切な方法を選択してください。