CSS3 Filter

第一,css3种的filter和css IE浏览器下的filter不是一个东西

第二,filter的兼容性可点击这个网址查询

第三,filter的语法 filter: none | filter-function [ filter-function ]*

第四 filter-function有10种类型

• grayscale灰度 值为0-1之间的小数
• sepia褐色 值为0-1之间的小数
• saturate饱和度 值为num（小于0神似无效）
• hue-rotate色相旋转 角度值＊deg
• invert反色 值为0-1之间的小数
• opacity透明度 值为0-1之间的小数
• brightness亮度 值为0-1之间的小数
• contrast对比度 值为num
• blur模糊 值为长度 ＊px
• drop-shadow阴影 x轴偏移值 y轴偏移值 模糊半径 阴影颜色

原图

灰度 -webkit-filter: grayscale(1);

褐色 -webkit-filter: sepia();

饱和度 -webkit-filter: saturate(0.5);

色相旋转 -webkit-filter: hue-rotate(50deg);

反色 -webkit-filter: invert(1);

透明度 -webkit-filter: opacity(0.5);

亮度 -webkit-filter: brightness(1.5);

对比度 -webkit-filter: contrast(1.5);

模糊 -webkit-filter: blur(2px);

阴影 -webkit-filter: drop-shadow(5px 5px 5px #000);

多个功能叠加 -webkit-filter: sepia() saturate(4) hue-rotate(295deg);

加上transition transition: 1s filter, 1s -webkit-filter; 移动到图片上看效果