CSS 中的框阴影与阴影

我们都知道可以使用 box-shadow 为 HTML 元素添加阴影。例如

.box{
    box-shadow: 2px 3px 10px rgba(0, 0, 0, .5);
}

但是你知道吗，我们可以使用 drop-shadow 滤镜来实现同样的效果。你只需要在 drop-shadow 函数中传递阴影值即可。

.box{
    filter: drop-shadow(2px 3px 10px rgba(0, 0, 0, .5));
}

虽然在这个例子中，box-shadow 和 drop-shadow 的作用是一样的。但是，如果我们在 PNG 图像上添加 box-shadow，你会看到 box-shadow 的形状是矩形/盒子。

img{
  box-shadow: 2px 3px 10px rgba(0, 0, 0, .5);
}

而如果我们为 PNG 添加阴影，阴影的形状将与 PNG 可见区域的形状相同。

img{
    filter: drop-shadow(2px 3px 10px rgba(0, 0, 0, .5));
}

请务必查看我的其他文章和 YouTube 频道

舒沃跟随

前端开发人员和 YouTuber。频道链接：https://www.youtube.com/c/AngleBrace

有帮助吗？在 Patreon 上支持我