因为Edge13支持这个属性了，所以打算写出来，毕竟已经看到有项目使用这个CSS3的新属性了。

CSS3 filter 属性是用来为一个元素（通常是图片）添加特殊的效果。

一、语法结构

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

注意：可以使用多个滤镜效果，用空格隔开。

这么多效果也不是都经常使用，所以先从最常用的说起吧。

1、blur(px)

模糊效果，值越大，越模糊。默认值为0，可以设置具体长度值，不能用百分比值。

img{filter:blur(5px);}

See the Pen  filter:blur by zhaolanzhen (@mrszhao)  on CodePen.

2、grayscale(%)

转换成灰度图像。0%-100%之间的数值。100%则完全转换成灰度图像。

img{filter:grayscale(50%)}

See the Pen  filter:blur by zhaolanzhen (@mrszhao)  on CodePen.

3、opacity(%)

透明度，和opacity属性很像。不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。

img{filter:opacity(50%)}

See the Pen  filter:opacity by zhaolanzhen (@mrszhao)  on CodePen.

4、drop-shadow(h-shadow v-shadow blur spread color)

添加投影效果，和box-shadow很相似，但是不接受insert内阴影的值。

更大的区别在于drop-shadow是投影，当物体有镂空的部分时，这个镂空的部分是没有投影的，而box-shadow是把物体当整体，不管有没有镂空部分，全部都当成实心的来做阴影。

See the Pen  drop-shadow by zhaolanzhen (@mrszhao)  on CodePen.

5、hue-rotate(deg)

设置色相旋转角度，把颜色看成一个360度的色环。默认值是0deg，图像没有变化。

See the Pen  hue-rotate by zhaolanzhen (@mrszhao)  on CodePen.

6、invert(%)

反转图像，0%图像无变化，100%完全反转。可以理解为反相，就是改变成自己的180度的互补色，就像传统照相的底片一样，也就是负片。

See the Pen  invert by zhaolanzhen (@mrszhao)  on CodePen.

7、brightness(%)

改变图像的亮度。0%为全黑，100%为正常状态，图片不变。可以高于100%，则图片更亮。

See the Pen  brightness by zhaolanzhen (@mrszhao)  on CodePen.

8、saturate(%)

调整图像的饱和度。0%完全不饱和，100%图像无变化，大于100%，则饱和度更高。

See the Pen  saturate by zhaolanzhen (@mrszhao)  on CodePen.

9、sepia(%)

转换成深褐色图像。0%-100%的值。0%图像无变化，100%为最深的褐色。

See the Pen  sepia by zhaolanzhen (@mrszhao)  on CodePen.

10、contrast(%)

调整图像的对比度。0%完全没有对比，图像全灰。100%图像不变。大于100%则图像对比增强。

See the Pen  contrast by zhaolanzhen (@mrszhao)  on CodePen.

11、可以使用多个滤镜，用空格隔开。

See the Pen  multi filters by zhaolanzhen (@mrszhao)  on CodePen.

腾讯isux:腾讯社交用户体验设计 - Tencent ISUX Design腾讯的这个网站就用了灰色图片变成彩色图片的效果，但是为了兼容性，并没有使用filter滤镜，而是准备了两张图片，一张灰色，一张彩色，再用opacity的方式，让彩色图片默认opacity为0，鼠标经过li的时候再把彩色图片的opacity变成1，实现彩色图片挡住下面灰色图片的效果。