<p class="zw">你可能会又一次奇怪，阴影<code>drop-shadow</code>滤镜是什么？它和<code>box-shadow</code>有什么区别。它们使用相同的参数：水平（x）偏移、垂直（y）偏移、模糊半径、扩散半径和阴影颜色值，你或许更混淆。下面是<code>drop-shadow</code>的语法。</p> <pre class="代码无行号"><code>.filter { filter : drop-shadow(5px 5px 5px rgba(0,0,0,.5)); }</code></pre> <p class="zw">你可能并没有发现<code>drop-shadow</code> 和 <code>box-shadow</code>的差别，直到你将它们应用于包含alpha透明度通道的图像。当图像有一个alpha值时，<code>drop-shadow</code>滤镜会检测到它，并在图像空间内添加阴影，就像我们在Photoshop或Sketch里添加<code>drop-shadow</code>。</p> <p class="图"><img alt="1708.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/205.jpg"></p> <p class="图题">上面是<code>drop-shadow</code>的效果，下面是<code>box-shadow</code>的效果。</p> <p class="图"><img alt="1709.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/206.jpg"></p> <p class="zw">与之相反，<code>box-shadow</code>属性只能检测到元素的外边缘并应用阴影效果。</p> <p class="zw">让我们来看看从左向右移动，增加偏移量，水平和垂直偏移如何影响<code>drop-shadow</code>滤镜的结果。</p> <p class="图"><img alt="1710.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/207.jpg"></p> <p class="图题">增加偏移。</p> <p class="zw"><code>drop-shadow</code>的水平和垂直偏移是必需的，而其他值不是。接下来，我们将从小到大增加可选任意的模糊半径的值。当我们不指定模糊半径，阴影显得很浓厚，边缘也很清晰锐利。</p> <p class="图"><img alt="1711.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/208.jpg"></p> <p class="图题">调整模糊半径的值。</p> <p class="zw">回顾多年的Web标准发展过程，我一直为变化的过程缓慢而沮丧。不过让我感到惊讶和兴奋的是，新技术如CSS滤镜这么快就被浏览器所支持。这对设计师和开发人员来讲都是一个好消息，尤其是我们现在正拥抱响应式设计。</p> <p class="zw">移动端的兴起和相关需求都非常关注性能，这些都表明我们需要减少服务器的请求数和减小下载资源的大小。视觉方面，我越来越多地采用CSS来实现，这让网站可以更快、更好的呈现出来。CSS滤镜及其相关的混合模式朝着这个方向迈出了一大步。</p>
