css filter 滤镜属性学习 和 drop-shadow() 和 box-shadow的区别

用的最多的三个属性

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 图片，透明图片，整个都会投影过来）