css给图片设置阴影效果

问题：给不规则的镂空图片设置阴影

box-shadow适合给dom元素自定义样式后设置阴影效果。

但我们拿到一张不规则图片设置box-shadow后效果明显不符我们的预期。

解决方法：css中的filter

CSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

mdn链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

我们给img设置css属性

filter: drop-shadow(-4rem 0 4rem #000);

可以得到我们想要实现的效果。

注意： Internet Explorer 不支持 filter 属性。

filter可实现的效果不仅如此。我们可以再看到更多效果在runoob

无了，have a nice day！