用的最多的三个属性
1 grayscale() 调整图片的灰度 把蓝色的图片变灰了
2. blur() 设置高斯模糊值,值越大越模糊
3. drop-shadow() 这个就厉害了,这个时候就是该轮到drop-shadow出场了,drop-shadow是CSS3中filter(滤镜)中阴影滤镜,它就符合真实世界的投影,非透明的颜色,就有投影;透明部分,光线穿过,没投影。而使用box-shadow,则并没有实现我们想要的效果。box-shadow顾名思意“盒阴影”,只是盒子的阴影。所以出现上面的效果也是意料之中了。
下面是 drop-shadow() 和 box-shadow的区别 的区别;可以看到 box-shadow 只是一个方块的阴影,而 drop-shadow()是复制
参考文章:CSS filter:drop-shadow 妙用
所以在图标颜色变化的时候,我们不需要ui去改,利用这个属性改就可以了 (但是前提是图片是png 图片,透明图片,整个都会投影过来)