CSSでのボーダーの影の設定方法と例

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

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

上記の例では、.boxというクラスを持つ要素に対して、2ピクセルの水平方向のオフセット、2ピクセルの垂直方向のオフセット、4ピクセルのぼかし半径、および0.4の不透明度を持つ影が設定されます。

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

.box {
  border: 1px solid black;
  border-image: linear-gradient(to bottom, black, transparent) 1 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

上記の例では、.boxというクラスを持つ要素に対して、1ピクセルの黒い実線ボーダーが設定され、そのボーダーに縦方向にグラデーションが適用されます。さらに、要素に2ピクセルの水平方向のオフセット、4ピクセルの垂直方向のオフセット、4ピクセルのぼかし半径、および0.4の不透明度を持つ影が設定されます。

:after疑似要素を使用する方法:

.box {
  position: relative;
}
.box::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 100%;
  height: 100%;
  border: 1px solid black;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}

上記の例では、.boxというクラスを持つ要素に対して、相対位置指定が行われます。そして、:after疑似要素を使用して要素の内部に絶対位置指定された要素を生成し、その要素に対して影を設定します。

これらはボーダーの影を設定するためのいくつかの一般的な方法です。他にもさまざまな方法がありますが、上記の例は一般的な手法を示しています。必要に応じて、それぞれの方法をカスタマイズして使用することができます。