使用'盒子阴影”和剪辑路径一起

让我们探索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中文网其他相关文章！