如何在 CSS 中建立單面陰影效果？

在元素的單面上放置陰影

在元素上建立陰影效果通常使用box-shadow 屬性來實現，該屬性可以在元素上應用陰影元素的所有面。然而，在某些情況下，可能希望陰影僅出現在一側（例如底部），而不與與其相鄰的其他元素重疊。

實現此目的的一種方法是利用偽-像 :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中文網其他相關文章！