grayscale 灰度 值为0-1之间的小数
sepia 褐色 值为0-1之间的小数
saturate 饱和度 值为num
hue-rotate 色相旋转 值为angle
invert 反色 值为0-1之间的小数
opacity 透明度 值为0-1之间的小数
brightness 亮度 值为0-1之间的小数
contrast 对比度 值为num
blur 模糊 值为length
drop-shadow 阴影
下面一个一个介绍效果
grayscale灰度
如果使用该效果参数里没值的话将会以100%来渲染，取值0-1之间为不同的灰度。下面实例为100%的渲染：filter:grayscale(1) ;
sepia
褐色，就是美图秀秀里有个怀旧功能的那种效果，取值也是0-1，filter:sepia(1) ;
saturate饱和度
该属性改变图片的饱和度，取值范围为数字即可，默认值100%，示例为600%：filter:saturate(6) ;
hue-rotate色相旋转
hue-rotate用来改变图片的色相，默认值为0deg，取值为angle，示例：-webkit-filter:hue-rotate(180deg)
invert反色
invert的效果就和照片底片有点相似，示例：-webkit-filter:invert(1)
opacity透明度
这个属性经常遇到，示例：-webkit-filter:opacity(0.3)
brightness亮度
改变图片的亮度，默认值为100%，示例：-webkit-filter:brightness(0.5)
contrast对比度
这个属性取值和饱和度saturate类似，示例500%：-webkit-filter:contrast(5)
blur模糊
这个属性改变图片的清晰度，默认值为0，示例：-webkit-filter:blur(6px)
drop-shadow阴影
这个类似于box-shadow，给图片加阴影，示例：-webkit-filter:drop-shadow(10px 10px 10px #000)
当然，添加多个属性也是可以的，示例：filter:saturate(5) hue-rotate(500deg) grayscale(0.8) sepia(0.5) contrast(1.5) invert(0.4) brightness(1.8);
最近对css3的动画特别感兴趣
