你可能会又一次奇怪，阴影drop-shadow滤镜是什么？它和box-shadow有什么区别。它们使用相同的参数：水平（x）偏移、垂直（y）偏移、模糊半径、扩散半径和阴影颜色值，你或许更混淆。下面是drop-shadow的语法。

.filter { 
filter : drop-shadow(5px 5px 5px rgba(0,0,0,.5)); }

你可能并没有发现drop-shadow 和 box-shadow的差别，直到你将它们应用于包含alpha透明度通道的图像。当图像有一个alpha值时，drop-shadow滤镜会检测到它，并在图像空间内添加阴影，就像我们在Photoshop或Sketch里添加drop-shadow。

上面是drop-shadow的效果，下面是box-shadow的效果。

与之相反，box-shadow属性只能检测到元素的外边缘并应用阴影效果。

让我们来看看从左向右移动，增加偏移量，水平和垂直偏移如何影响drop-shadow滤镜的结果。

增加偏移。

drop-shadow的水平和垂直偏移是必需的，而其他值不是。接下来，我们将从小到大增加可选任意的模糊半径的值。当我们不指定模糊半径，阴影显得很浓厚，边缘也很清晰锐利。

调整模糊半径的值。

回顾多年的Web标准发展过程，我一直为变化的过程缓慢而沮丧。不过让我感到惊讶和兴奋的是，新技术如CSS滤镜这么快就被浏览器所支持。这对设计师和开发人员来讲都是一个好消息，尤其是我们现在正拥抱响应式设计。

移动端的兴起和相关需求都非常关注性能，这些都表明我们需要减少服务器的请求数和减小下载资源的大小。视觉方面，我越来越多地采用CSS来实现，这让网站可以更快、更好的呈现出来。CSS滤镜及其相关的混合模式朝着这个方向迈出了一大步。