第一,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; 移动到图片上看效果