CSS3的filter属性简单且强大,本篇是学习CSS3 Filter所做的笔记。
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 { filter: grayscale(1/*默认值为100%*/); }
二、褐色
.sepia { filter: sepia(1); }
三、饱和度
.saturate { filter: saturate(2.1); }
四、色相翻转
.hue-rotate { filter: hue-rotate(60deg) }
五、反色
.invert { filter: invert(1/*范围0-1*/); }
六、透明度
.opacity { filter: opacity(0.5/*范围0-1*/); }
七、亮度
.brightness { filter: brightness(0.5); }
八、对比度
.contrast { filter: contrast(3); }
九、模糊
.blur { filter: blur(5px); }
十、阴影
.drop-shadow { filter: drop-shadow(10px/*x轴偏移量*/ 10px/*y轴偏移量*/ 5px/*垂直偏移量*/ black/*阴影颜色*/); }