CSS で片面シャドウ効果を作成するにはどうすればよいですか?

要素の片側にシャドウをドロップする

要素にシャドウ効果を作成するには、通常、要素にシャドウを適用できる box-shadow プロパティを使用して実現されます。要素のすべての側面。ただし、特定のシナリオでは、隣接する他の要素と重ならないように、影を底部などの片側のみに表示することが望ましい場合があります。

これを実現する 1 つのアプローチは、疑似:after のような要素を使用して、メイン要素の下に追加のレイヤーを作成します。このレイヤーは、目的のシャドウ効果を示すために個別に配置およびスタイル設定できます。

次のコードを考えてみましょう:

#box {
  background-color: #3D6AA2;
  width: 160px;
  height: 90px;
  position: absolute;
  top: calc(10% - 10px);
  left: calc(50% - 80px);
}

.box-shadow:after {
  content: "";
  position: absolute;
  width: 100%;
  bottom: 1px;
  z-index: -1;
  transform: scale(.9);
  box-shadow: 0px 0px 8px 2px #000000;
}

この例では、ID ボックスを含むコンテナー要素を作成し、 CSS クラス .box-shadow を追加します。 :after 擬似要素は .box-shadow 内に追加され、特定の寸法、位置、影のプロパティでスタイル設定されます。

:after 擬似要素にbottom: 1pxとtransform:scale(.9)を設定することで、要素では、メイン要素の下に表示される幅が狭く、わずかに傾斜した形状を作成します。次に、box-shadow プロパティによってこの形状にシャドウ効果が追加され、メイン要素の下側にのみシャドウが表示されます。

この手法により、影響を与えることなくシャドウを正確に配置およびカスタマイズできます。デザインの他の部分は、さまざまなレイアウト要件に対応する多用途のソリューションを提供します。

以上がCSS で片面シャドウ効果を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。