不规则形状或图片添加阴影效果

在项目中，经常会给卡片，弹出框，图片等等添加阴影效果，一般box-shadow属性就能满足。但有时候图片是不规则的，或者弹出框会带一个箭头，或者多个元素组合出来的一个效果，这时候就需要一个属性 drop-shadow()

 这个函数有点类似于 box-shadow 属性.  box-shadow 属性在元素的整个框后面创建一个矩形阴影, 而 drop-shadow() 过滤器则是创建一个符合图像本身形状(alpha通道)的阴影。

filter: drop-shadow(30px 10px 4px #4444dd);

 

参数值

offset-x offset-y （需要）

两个<length>值确定阴影偏移量。offset-x指定水平距离，其中负值将阴影放置在元素的左侧。offset-y指定垂直距离，其中负值将阴影放置在元素上方。如果两个值均为0，则阴影将直接放置在元素后面。

blur-radius （可选的）

阴影的模糊半径，指定为<length>。值越大，阴影变得越大且越模糊。如果未指定，则默认为0，从而产生清晰的，不模糊的边缘。不允许使用负值。

spread-radius （可选的）

阴影的传播半径，指定为<length>。正值将导致阴影扩大并增大，而负值将导致阴影缩小。如果未指定，则默认为0，并且阴影的大小将与输入图像的大小相同。

color （可选的）

阴影的颜色，指定为<color>。如果未指定，color则使用属性的值。

MDN官方解释