1、blur模糊
blur的效果顾名思义就是模糊,单位是px,例如:filter:blur(10px)效果如下,左为原图,右为使用blur的效果图:
当blur(100px)时可以看到图片几乎看不到了
这个值必须为正值,为负值时没有任何效果,如blur(-100px):
2、opacity透明度
效果和opacity属性一致,数值在0-1之间,当为0是看不到,1为正常显示,当filter:opacity(0.5)时效果如下图右,左为原图
当opacity(0.1)如下:
3、grayscale透明度
grayscale效果是使图片变灰,数值在0-1之间,1表示完全变灰,成了黑白照片,0表示没有效果,当filter:grayscale(0.5)时效果如下图右
可能效果不是很明显,当我们设为1时grayscale(1)时,如下,这就很有年代感
4、sepia褐色
sepia的效果是变为褐色,数值在0-1之间,1表示完全变褐,0表示没有效果,这很适合于打造复古风格、怀旧风格,sepia(0.5)效果如下图右:
sepia(1)效果如下,给人一种怀旧的感觉,感觉想要回到80、90年代一样
5、saturate饱和度
饱和度是指颜色的纯度,saturate的取值为大于或等于0的数值,当filter:saturate(0)时,效果和grayscale(1)效果一样,如下图右:
saturate(1)时,效果与原图一样:
saturate(5)时,效果如下:
6、invert反转颜色
数值取值是在0-1或者是0-100%,当为1或100%时为完全反转,所谓的颜色反转就是255减去颜色的rgb中的各个值,所以白色rgb(255,255,255)反转invert(100%)就是黑色rgb(0,0,0):
所以蓝色rgb(0,120,215)反转invert(100%)后就是rgb(255,135,40)
这个可以得出一个公式:反转后颜色值=(255-当前颜色值) X invert数值+当前颜色值 X (1-invert数值),如rgb(0,120,215)使用invert(80%)就是r=(255-0)X0.8+0X(1-0.8)=204,g=(255-120)X0.8+120X(1-0.8)=132,b=(255-215)X0.8+215X(1-0.8)=75,所以得rgb(204,132,75)
上面的图片使用invert(100%)后的效果如下图右,一种照片底片的效果:
7、brightness亮度
取值为数字或百分数,当取值为1时,与原图一致,当取值为0或者负数是为全黑,当取值为0-1时,亮度降低,当取值大于1时,亮度增大,brightness(0)效果如下图右:
brightness(0.5)效果如下图右:
brightness(1)效果如下图右:
brightness(5)效果如下图右:
8、contrast对比度
取值为大于或等于0的数字或百分数,当取值为1时,与原图一致,当取值为0-1时,对比度降低,当取值大于1时,对比度增大,contrast(0)效果如下图右:
contrast(0.2)效果如下图右:
contrast(1)效果如下图右:
contrast(5)效果如下图右:
9、drop-shadow阴影
drop-shadow和box-shadow很像,是添加阴影,drop-shadow(10px 10px red)效果如下图右:
10、hue-rotate色相旋转
取值是角度,单位是deg,这个是根据色轮对颜色进行调整,Adobe有一个色轮在线配色网站
https://kuler.adobe.com/,如hue-rotate(120deg)效果如下图右:
hue-rotate(260deg)效果如下图右, 这一抹绿真是让人不经意想起里约奥运会泳池里的水呀┑( ̄Д  ̄)┍: