filter-drop-shadow有方向的阴影使用说明

前些天，我在一个项目中用到了阴影效果。为了实现这一效果，我尝试使用了一长串的box-shadow属性。今天当我读到关于filter属性的介绍时，突然意识到了一种全新的可能性。接下来，让我们对比一下这两种实现方式。

让我们看看使用box-shadow属性的代码：

box-shadow方案：

复制代码代码如下:

```css

.box-shadow {

box-shadow: rgba(0, 0, 0, 0.5) 0 1px 5px; / 定义阴影颜色、偏移量、模糊半径等属性 /

}

```

然后，再看看使用filter属性的drop-shadow滤镜的代码：

drop-shadow滤镜方案：

复制代码代码如下:

```css

.filter-drop-shadow {

-webkit-filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.5)); / 为WebKit浏览器添加阴影效果 /

-moz-filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.5)); / 为Firefox浏览器添加阴影效果 /

-ms-filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.5)); / 为早期IE浏览器添加阴影效果 /

-o-filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.5)); / 为Opera浏览器添加阴影效果 /

filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.5)); / 定义标准阴影效果 /

}

```

接下来是效果对比环节。关于drop-shadow滤镜，如果你还不了解filter属性，那么强烈建议你了解一下。Chrome从21版本开始支持filter属性（目前主流版本是22），Safari 6和iOS 6中的Safari也都支持。而Firefox、Opera和IE则推荐使用传统的box-shadow属性。filter规范现在由WebKit和Adobe推动，Firefox正在跟进，IE10也提供了一定的支持。在WebKit浏览器上，使用filter属性可以实现更好的阴影效果。那么，为什么不尝试一下呢？

通过Cambrian的渲染函数将内容呈现在页面上：`cambrian.render('body')`。这样，你就可以在网页上展示出这两种阴影实现方式的效果对比了。