CSS3的滤镜效果（-webkit-filter）

    -webkit-filter是css3的一个属性,它能通过通过设定不同属性，来做到不用ps就能做到：高斯模糊，调整灰度值，对比度，亮度等等效果。这样对于一张图片，如果你希望因为不同的状态而想要得到这张图片的不同图片效果的话，就不用再另外做一张图片，来进行两张图片之间的相互转换。通过一个css3属性就能完成。

    通过-webkit-filter的滤镜效果，对图片来进行效果控制，对页面浏览性能，效果变换性能都有很大的提升。

   -webkit-filter:现在规范中支持的效果有：

• grayscale 灰度               值为0-1之间的小数 

• sepia 褐色　　　　　　   值为0-1之间的小数

• saturate 饱和度　　　　 值为num

• hue-rotate 色相旋转　　值为angle（deg）

• invert 反色　　　　　　  值为0-1之间的小数

• opacity 透明度　　　　　值为0-1之间的小数

• brightness 亮度　　　　 值为0-1之间的小数

• contrast 对比度　　　　 值为num

• blur 模糊　　　　　　     值为length

• drop-shadow 阴影

 这里展示下阴影的效果，其他效果可自己尝试！

  -webkit-filter:drop-shadow(10px 10px 10px #000)