使用'盒子陰影”和剪輯路徑一起

讓我們探索CSS解決方法，以將陰影應用於剪裁形狀。標準的box-shadow失敗了，因為剪輯切斷了陰影。這是實現預期效果的方法：

創建基本形狀

首先，我們創建一個基本框：

 。標籤 {
  背景：＃fb8c00;
  顏色：＃222;
  字體：BOLD 32PX System-UI;
  填充：2REM 3REM 2REM 4REM;
}

用clip-path塑造

接下來，我們使用盒子陰影”和剪輯路徑一起clip-path塑造盒子：

 。標籤 {
  / * ... */
  剪輯路徑：多邊形（30px 0％，100％0％，100％100％，30px 100％，0 50％）;
}

box-shadow問題

嘗試使用盒子陰影”和剪輯路徑一起box-shadow應用陰影：

 。標籤 {
  / * ... */
  盒子陰影：5PX 5PX 10PX RGBA（0，0，0，0.5）;
}

...失敗，因為clip-path會消除剪裁區域之外的陰影。

解決方案：對父母的drop-shadow

該解決方案涉及在父元素上使用盒子陰影”和剪輯路徑一起drop-shadow()過濾器。由於clip-path僅影響其應用於應用的元素，因此可見父母的陰影。

<div class="tag-container">
  <div class="tag">標籤</div>
</div>

.tag-container {
  過濾器：DropShadow（5PX 5PX 10PX RGBA（0，0，0，0，0.5））;
}

。標籤 {
  / * ...現有樣式... */
}

現在，應用於父的drop-shadow濾波器.tag-container施放著符合兒童形狀.tag元素的陰影，從而解決了問題。在父上使用盒子陰影”和剪輯路徑一起box-shadow無法正常工作，因為它會產生矩形陰影。

以上是使用'盒子陰影”和剪輯路徑一起的詳細內容。更多資訊請關注PHP中文網其他相關文章！