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

片側ドロップ シャドウの作成

要素の片側のみに影響を与えるドロップ シャドウを実現することは、Web では一般的な要件となる場合があります。デザイン。たとえば、隣接する要素に重ならないように要素の下に影を落としたいというシナリオが考えられます。

この効果を実現する 1 つの方法は、サイズを指定できる box-shadow プロパティを使用することです。要素の周囲の影の、広がり、および色。ただし、box-shadow のデフォルトの動作では、要素のすべての側面にシャドウが作成されます。

下部のみのドロップ シャドウの作成

ドロップを作成するには要素の下にのみ表示されるシャドウの場合は、擬似要素を作成して親要素の下部に配置できます。この擬似要素はシャドウ効果を受け取ります。

最新の CSS 構文を使用した元の質問の更新された例を次に示します。

#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;
}

このコードは、下方向にのみ伸びるドロップ シャドウを作成します。 #box 要素の下部に、効果的に下部のみの影の印象を与えます。疑似要素は、メイン要素の背後に確実に表示されるように、z-index が -1 の下部に配置されます。

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