CSS3 Filter是W3C CSS filter Effect 1.0中定义的滤镜，一个使用CSS来改变图片和HTML的模糊度、亮度、对比度、饱和度等等效果的过滤器。
好吧，每次写这种博客的时候，都有改版的冲动，我把详细内容写在了这里，请猛击:DEMO
使用方法：
filter:filter(value); filter:filter(value) filter(value) filter(value);/* 多属性 */
Blur（模糊）
图像模糊参数单位:px/em/pt。 示例：
filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px);
Brightness（亮度）
亮度参数:”-1″至”1″,值越大亮度越高。示例：
filter: brightness(0.3); -webkit-filter: brightness(0.3); -moz-filter: brightness(0.3); -o-filter: brightness(0.3); -ms-filter: brightness(0.3);
Saturation（饱和度）
饱和度参数:半分比,以100%为中间值。 示例：
filter: saturate(50%); -webkit-filter: saturate(50%); -moz-filter: saturate(50%); -o-filter: saturate(50%); -ms-filter: saturate(50%);
Hue Rotate（色相）
色相参数:角度值0—360。 示例：
filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); -moz-filter: hue-rotate(180deg); -o-filter: hue-rotate(180deg); -ms-filter: hue-rotate(180deg);
Contrast（对比度）
对比度参数:百分比；以100%为中间值。示例：
filter: contrast(50%); -webkit-filter: contrast(50%); -moz-filter: contrast(50%); -o-filter: contrast(50%); -ms-filter: contrast(50%);
Invert（反相）
反相参数：百分比；0%-100%。示例：
filter: invert(100%); -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%);
Grayscale（灰度）
灰度参数:百分比 0%-100%。示例：
filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%);
Sepia（怀旧）
怀旧参数:百分比 0%-100%。示例：
filter: sepia(100%); -webkit-filter: sepia(100%); -moz-filter: sepia(100%); -o-filter: sepia(100%); -ms-filter: sepia(100%);
:)
There is one more thing
如果你发现过滤后的图片对比原图没有什么变化，那说明你的浏览器不支持这个CSS3 filter属性。
其实目前只有webkit浏览器支持该属性。Safari、Firefox、Opera、IE还不给力。
详细内容请猛戳:DEMO
Pingback：麻凯倩's blog❤前端 » 惊现CSS3 filter
赞啊！受益！~