本文使用的图片如下：
一、blur属性。 blur的使用格式一般为 filter: blur(1px); -webkit-filter: blur(1px)； 该属性用来为元素增加模糊效果，显示效果如下:
二、grayscale属性。 grayscale的使用格式一般为 filter: grayscale(0.6); -webkit-filter: grayscale(0.6); 该属性用来设置元素的灰度，可以使彩色图片变为黑白，显示效果如下：
三、sepia属性。 sepia的使用格式一般为 filter: sepia(0.6); -webkit-filter: sepia(0.6); 该属性用来设置元素的褐色，显示效果如下：
四、saturate属性。 saturate的使用格式一般为： filter: saturate(0.15); -webkit-filter: saturate(0.15); 该属性常用来改变图片的饱和度，显示效果如下：
五、hue-rotate属性。 hue-rotate的使用格式一般为： filter: hue-rotate(189deg); -webkit-filter: hue-rotate(189deg); 该属性常用来改变图片的色相，显示效果如下：
六、invert属性。 invert的使用格式一般为： filter: invert(56%); -webkit-filter: invert(56%); 该属性用来实现反色，invert做出来的效果就像是我们照相机底面的效果一样，显示效果如下：
七、brightness属性。 brightness的使用格式一般为： filter: brightness(300%); -webkit-filter: brightness(300%); 该属性用来设置图片的亮度，显示效果如下：
八、contrast属性。 contrast的使用格式一般为： filter: contrast(56%); -webkit-filter: contrast(56%); 该属性用来改变图片的对比度，显示效果如下：
九、opacity属性。 opacity的使用格式一般为： filter: opacity(56%); -webkit-filter: opacity(56%); 该属性用来设置图片的透明度，显示效果如下：
十、drop-shadow属性。 drop-shadow的使用格式一般为： filter: drop-shadow(10px 10px 10px yellow); -webkit-filter: drop-shadow(10px 10px 10px yellow); 用来给图片增加阴影效果，与box-shadow类似，显示效果如下：
ps：opacity在IE下的显示方法：
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50);