CSS阴影你只会box-shadow？试试drop-shadow

box-shadow基础

各项值的解释

offset-x：必需，取值正负都可。offset-x水平阴影的位置。
offset-y：必需，取值正负都可。offset-y垂直阴影的位置。
blur:可选，只能取正值。blur-radius阴影模糊半径，0即无模糊效果，值越大阴影边缘越模糊。
spread：可选，取值正负都可。spread代表阴影的周长向四周扩展的尺寸，正值，阴影扩大，负值阴影缩小。
color:可选。阴影的颜色。如果不设置，浏览器会取默认颜色，通常是黑色，但各浏览器默认颜色有差异，建议不要省略。可以是rgb(250,0,0)，也可以是有透明值的rgba(250,0,0,0.5)。
inset:可选。关键字，将外部投影(默认outset)改为内部投影。inset 阴影在背景之上，内容之下。

image.png

image.png

效果解释

假如我写一个声明：box-shadow: 120px 80px 40px 20px #00fcfc，得到这样的效果：

image.png

box-shadow的不足之处

box-shadow是IE9出现的属性，作为老前辈，虽然很多场合挺好用的，但是它也有不足：

1. 模糊比较生硬
2. 无法智能阴影

所以今天引出另一个好用的CSS滤镜：drop-shadow。

drop-shadow滤镜是什么

MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter-function/drop-shadow()

支持度：Edge 13以上

这个滤镜也是一种阴影效果，但是非常新。

与box-shadow的区别

1. drop-shadow相对比较柔和。相同属性前提下，效果见下：

box-shadow效果：

image.png

drop-shadow效果：

image.png

2. drop-shadow能智能识别容器内容

比如我从前写的一个气泡效果（https://www.jianshu.com/p/c17b1f4989a0），现在，前两种方式都是box-shadow，只不过箭头实现方式有所区别，第三种是drop-shadow。

第一种箭头几乎看不清，第二种又很生硬，第三种就很自然，而且drop-shadow强大之处就是智能识别元素边缘，所以drop-shadow无需在伪元素上声明，而box-shadow必须在伪元素上声明。

image.png

3. box-shadow有内阴影，也可以叠加阴影

drop-shadow都做不到。

结论

在支持drop-shadow的浏览器上，可以视情况优先选择drop-shadow，效果通常好于box-shadow。当然，如果你是box-shadow高手，另当别论。