如何将 Box-Shadow 添加到 Clip-Path 对象？

在 CSS 中，Box-Shadow 和 Clip-Path 是两个非常实用的属性。Box-Shadow 可以为元素创建阴影效果，而 Clip-Path 可以剪裁元素的形状。

有时候你可能需要将这两个属性结合起来使用，为元素同时添加阴影和剪裁效果。那么如何实现这个功能呢？下面介绍两种常用的方法。

方法一：使用伪元素

我们可以为元素添加一个伪元素，然后将阴影效果添加到伪元素上。接着，为原始元素和伪元素都设置相同的 Clip-Path 效果，即可实现同时具备剪裁和阴影效果的元素。

代码如下：

/* 为元素添加伪元素 */
.box {
  position: relative;
}

.box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 10px rgba(0, 0, 0, .5);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* 设置相同的 Clip-Path 效果 */
.box,
.box::after {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

上述代码中，我们为元素添加了一个伪元素 ::after，然后在伪元素上设置了阴影效果。接着，为元素和伪元素都设置了相同的 Clip-Path 效果。

这种方法的缺点是需要使用伪元素，代码量相对较多。下面介绍第二种方法。

方法二：使用 filter 属性

我们可以使用 filter 属性为元素添加阴影效果。接着，为元素设置 Clip-Path 效果，然后使用 filter: unset; 将阴影效果从元素上移除，然后再将其添加到 Clip-Path 上，即可实现目标效果。

代码如下：

/* 为元素添加阴影效果 */
.box {
  box-shadow: 0 0 10px rgba(0, 0, 0, .5);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  filter: unset;
}

/* 将阴影效果添加到 Clip-Path 上 */
.box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, .5));
}

上述代码中，我们为元素添加了阴影效果和 Clip-Path 效果。接着，使用 filter: unset; 将阴影效果从元素上移除，然后添加到 Clip-Path 上，即可实现目标效果。

这种方法的优点是代码相对简洁，不需要使用伪元素。但是，由于 filter 属性还没有得到广泛的支持，可能在某些浏览器上会出现兼容性问题。

总结

通过上述两种方法，你可以为元素同时添加阴影和 Clip-Path 的效果。如果浏览器支持 filter 属性，建议使用第二种方法，因为代码相对简洁。如果浏览器不支持 filter 属性，可以使用第一种方法。