如何使用 CSS 建立單面陰影？

建立單面投影

要建立僅出現在元素一側的投影，您可以利用 CSS 屬性和偽元素。以下是詳細的解決方案：

使用::after 偽元素

.box {
  position: relative;
  width: 200px;
  height: 100px;
}

.box::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
  box-shadow: 0px 10px 10px #000000;
  z-index: -1;
}

在這段程式碼中，我們建立一個父元素，其父元素是一個box 類，用於定位元素。然後，我們設定 ::after 偽元素的樣式，透過指定位置、大小和 box-shadow 屬性來建立陰影。 z-index 設定為 -1 以將陰影放置在主元素後面。

添加漸變模糊

要增強陰影的外觀，您可以應用對盒子陰影進行漸變模糊：

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

此附加代碼為陰影添加漸層模糊，創造更微妙和真實的效果效果。

以上是如何使用 CSS 建立單面陰影？的詳細內容。更多資訊請關注PHP中文網其他相關文章！