CSS之filter的使用

有天收到这个需求，视觉想要实现下面的效果，但是视觉只会提供圆圈里面的图片，圆圈以及图片的那种阴影效果需要前端自己实现。我一开始是拒绝的，这灯关效果没搞过呀？最后耐不住视觉请喝了一杯奶茶，我开心地说好好，这效果容易实现。（OS：人呐，这么容易就被说服了~）

1、开始搜索

对于CSS没那么精通的我，开始搜索这种效果的实现，诸如”css 蒙蒙的效果“、”css 灯关效果“之类的关键词搜索，但是并没有给我带来太多实质性的结论。这阴影效果和box-shadow还不一样，它的阴影投影都带有一点那个图片的色泽，就是很像灯关打到了图片上留下的彩色阴影。

既然搜索不成，那我就去看看css的一些高级特性，这效果肯定跟什么shadow有关，于是我在css文档中搜索相关的关键词，最后，功夫不负有心人，终于找到了一个很像的drop-shadow。于是我赶紧拿过来应用一下：

1&:nth-child(1) .left .circle img {
2  /* px-to-viewport-ignore-next */
3  filter: drop-shadow(0 18px 6px rgba(219, 112, 198, 0.5));
4  width: 40px;
5  height: 41px;
6}

哈哈，经过一番调整，果然实现了和视觉稿一样的效果了。

这里题外话，我们用的蓝湖，但其实蓝湖在这种效果的识别上弱鸡的不行，完全没能够检测出来，包括我们待会讲的另外一篇文章，也是识别出错误的css样式，简直太差劲了的。

2、drop-shadow是啥？

顾名思义，含有shadow那肯定是阴影的意思，一个drop形象地描述了灯光掉落的感觉，所以drop-shadow可以理解为一束光照到元素上掉落下来的光效果。而我们常见的box-shadow、text-shadow从字面上也能够理解一二了，box主打的是盒子模型的阴影，text主打的则是文本的阴影。

按照鑫旭大神的这篇文章：## CSS3 filter:drop-shadow滤镜与box-shadow区别应用讲解，drop-shadow有如下特性：

• 不支持内阴影效果
• 不能阴影叠加（后面有人留言说现在的CSS已经支持了）
• 真正实现了一个元素的阴影效果，无论是DOM元素还是图片

实际的效果可以对比一下就看出来了，（图片引自上述文章）

1filter:drop-shadow(5px 5px 10px black)

1box-shadow: 5px 5px 10px black;

3、filter到底有多少宝贝？

那么css3的filter这个特性，到底还有多少我们可以去探索的呢？

filter的MDN官网解释是：

CSS filter 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

这里有对应的效果体验的demo：尝试一下

那我们可以在平时的视觉还原中用到filter的哪些能力呢？

比如刚才开题说到的阴影投影效果，用到了box-shadow

再比如图片的灰度（灰度图片蛮有用的，比如黑白照片处理，比如一些公祭日网站全灰的处理），用到了gray-scale：

更多用途可以参考掘金的这篇文章：# CSS filter 有哪些神奇用途