css / filter属性

最近项目开发用到了filter的grayscale和blur值，觉得很强大，今天来看看filter到底还能干什么！

filter的属性值有：
none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()

找了张温温的图，来看看这些值的效果：

filter: blur(5px); // 模糊

filter: brightness(300%) // 亮度

filter: contrast(200%) // 对比度

filter: drop-shadow(10px 5px 5px #666) // 阴影

filter: grayscale(100%) // 灰度

filter: hue-rotate(90deg) // 色相旋转

filter: invert(100%) // 反色

filter: opacity(50%) // 透明度

filter: saturate(200%) // 饱和度

filter: sepia(60%) // 褐色程度

参考文章： https://segmentfault.com/a/1190000016652024