滤镜效果规范提供了一个针对这个问题的解决方案，通过一个新的filter属性，通过一些便利的功能函数指定即可，如blur()、grayscale()、还有drop-shadow()。
filter: blur() grayscale() drop-shadow();
drop-shadow()滤镜接受和基本box-shadow相同的参数，但是没有扩散半径，没有inset关键字，不能用逗号分隔多个不同的阴影。
box-shadow: 2px 2px 10px rgba(0,0,0,.5);
我们可以这样写：
filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));
你可以在下图中看到drop-shadow()滤镜应用于文章开头图片中元素的效果。
使用drop-shadow()滤镜设置不规则阴影示例：
<div class="triangle"></div>.triangle{
width: 200px;
height: 60px;
position: relative;
filter: drop-shadow(0 0 5px #ccc);
background-color: #fff;
}
.triangle:after{
content: "";
position: absolute;
left: 20px;
bottom: -10px;
width: 20px;
height: 20px;
background-color: #fff;
transform: rotate(45deg);
}效果图：
以上就是Css不规则阴影怎么设置？的详细内容，更多请关注易知道|edz.cc其它相关文章！
