使用CSS和SVG制作跨浏览器的drop shadow阴影效果

02-22 次

标签 css阴影 drop-shadow

上一篇文章我们介绍了CSS box-shadow和drop-shadow之间的相同点和差异。现在让我们来多了解一些drop-shadow过滤器：Chrome、Safari和最新版本的Firefox浏览器都支持drop-shadow过滤器，在旧版本的Mozilla浏览器中，使用SVG来替代它，而IE9和之前的IE版本则使用微软公司的专有滤镜。

在这篇文章中，我们将会为大家展示如何使用SVG和CSS来制作跨浏览器的阴影效果，在学习完这篇文章后你可以为所有的元素添加上drop-shadow阴影效果。

下面是CSS版本的代码，我们复习一下：

-webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5)); 
filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));

这个语法非常简单：语法中的四个值分别代表：阴影的水平偏移，阴影的垂直偏移，阴影的模糊大小和阴影的颜色值。（使用rgba值可以制作出更为逼真的阴影效果）

Firefox (pre v35)

下面是SVG的版本。你可以将下面的代码保存为一个单独的文件（shadow.svg）或者将它嵌入到HTML页面中。代码如下：

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="2.2"/>
        <feOffset dx="12" dy="12" result="offsetblur"/>
        <feFlood flood-color="rgba(0,0,0,0.5)"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</svg>

SVG的语法是相当复杂的，这里不做详细解释。我们只需要了解4个值：stdDeviation是指模糊的程度，dx是阴影的水平偏移，dy是阴影的垂直偏移，flood-color是阴影的颜色值。

IE

IE使用的是微软的专用滤镜：

/* for IE 8 & 9 */
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
/* For IE 5.5 - 7 */
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12,
Color='#444')";

你会发现在IE浏览器值阴影的视觉效果并不是太好，你可能需要不断的测试调整DX滤镜中CSS3/SVG的值，但这种写法至少可以让dropshadow阴影效果出现在IE浏览器中了。

跨浏览器应用

下面的代码可以使dropshadow阴影效果在所有的浏览器上都基本表现一致：

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
    filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
    filter: url(shadow.svg#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

如果你是在页面中直接嵌入svg，那么你只需要写id值。

你可以将上面的代码应用到透明的PNG图片上或其它元素上，它将会获得一个真正跨浏览器的dropshadow阴影效果。