css3中Filter的十种特效

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/*阴影颜色*/);        }