Css不规则阴影怎么设置？

滤镜效果规范提供了一个针对这个问题的解决方案，通过一个新的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不规则阴影怎么设置？的详细内容，更多请关注0133技术站其它相关文章！