ボックスシャドウの上下のみを設定する方法

1. ボックスシャドウの上下のみを設定する方法はいくつかあります。以下にいくつかの方法を示します。

方法1: 伸縮性のあるボックスを使用する

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

このコードでは、box-shadowプロパティを使用してボックスシャドウを設定しています。最初の値 0px は水平方向のオフセットを表し、2番目の値 10px は垂直方向のオフセットを表します。3番目の値 10px はぼかし半径を表し、最後の値 -10px は拡大縮小量を表します。rgba(0, 0, 0, 0.75) はシャドウの色と透明度を指定しています。

方法2: 擬似要素を使用する

.box::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.75);
}
.box::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  box-shadow: 0px -10px 10px -10px rgba(0, 0, 0, 0.75);
}

このコードでは、::before と ::after の擬似要素を使用して、ボックスの上部と下部にボックスシャドウを追加しています。top プロパティと bottom プロパティを使用して位置を調整し、box-shadow プロパティを使用してシャドウを設定します。

2. 上記の方法は一部の例です。他にもさまざまな方法がありますが、選択した方法によって実現できるデザインや要件が異なる場合があります。自分のプロジェクトに最適な方法を選択しましょう。

この投稿では、CSSを使用してボックスシャドウの上下のみを設定する方法について解説しました。この情報を参考にして、自分のプロジェクトに適した方法を見つけてください。