本文主要介绍CSS滤镜的不常用用法，希望能给读者带来一些干货！OK，下面直接进入正文。本文所说的滤镜指的是CSS3出来之后的滤镜，并不是IE系列时代的滤镜。语法如下。如果没有接触过这个属性，可以先去MDN--filter了解一下：{filter:blur(5px);filter:brightness(0.4);filter:contrast(200%);filter:drop-shadow(16px16px20pxblue);filter:grayscale(50%);filter:hue-rotate(90deg);filter:invert(75%);filter:opacity(25%);filter:saturate(30%);filter:sepia(60%);/*应用多个滤镜*/filter:contrast(175%)brightness(3%);/*Globalvalues*/filter:inherit;filter:initial;filter:unset;}基本用法简单看一下几个效果滤镜：悬停可以取消滤镜，观察滤镜效果。简单地说，CSS滤镜提供类似PS的图形效果，例如元素的模糊、锐化或颜色变化。通常用于调整图像、背景和边框的渲染。本文将围绕这些过滤器展开，看看它们可以如何使用，或者可以玩出什么花样。常用用法由于题目是你不知道的技巧和细节，所以一些比较常用的用法就不重复了。通常我们看到更多的CSS滤镜用法：使用filter:blur()生成毛玻璃效果使用filter:drop-shadow()生成整体阴影效果使用filter:opacity()生成透明度一些小细节：对比度/亮度—悬停会使图片变亮。通常，页面上的按钮会有悬停/活动颜色变化，以增强与用户的交互。但是，有些图片显示很少有悬停交互。使用filter:contrast()或filter:brightness()可以在悬停图片时调整图片的对比度或亮度，从而聚焦用户的视野。Brightness表示亮度，contrast表示对比度。当然这个方法对按钮也有效，简单的CSS代码如下：.btn:hover,.img:hover{transition:filter.3s;filter:brightness(1.1)contrast(110%);}blur——生成图片shadows通常就我们而言，生成阴影的方式大多是box-shadow、filter:drop-shadow()、text-shadow。但是，使用它们来生成阴影是阴影只能是单色的。有的读者和同学会问，你这么说，那还能生成渐变阴影吗？好吧，当然不是。这确实行不通，但通过巧妙地使用filter:blur模糊滤镜，我们可以假装生成渐变或色彩丰富的阴影。假设我们有如下头像图片：接下来，我们将使用滤镜添加一层与原图颜色相似的阴影效果。核心CSS代码如下：.avator{position:relative;background:url($img)no-repeatcentercenter;background-size:100%100%;&::after{content:"";position:absolute;top:10%;width:100%;height:100%;background:inherit;background-size:100%100%;filter:blur(10px)brightness(80%)opacity(.8);z-index:-1;}}看效果：简单的原理就是利用伪元素生成一张与原图相似的图片，在原图下叠加一张同样大小的新图，然后使用滤镜模糊filter:blur()与亮度/对比度、透明度等其他滤镜配合，营造出虚幻的阴影，伪装成原图的阴影效果。嗯，最重要的是这句话filter:blur(10px)brightness(80%)opacity(.8);。CodePenDemo——filtercreateshadow(https://codepen.io/Chokcoco/pen/eGYYpo)blurblendingcontrasttoproduceafusioneffect接下来介绍的是本文的重点，blurfilter叠加产生的融合效果对比度过滤器。让你知道什么是CSS黑科技！分别取出两个滤镜，它们的作用是：filter:blur()：为图像设置高斯模糊效果。filter:contrast()：调整图像的对比度。然而，当它们“合体”时，却发生了奇妙的融合现象。通过contrastfilter消除高斯模糊的模糊边缘，利用高斯模糊达到融合效果。先看一个简单的例子：仔细看两个圆相交的过程。当边缘相互接触时，会产生边界融合效应。上面效果的实现基于两点：图形在canvas背景上设置动画filter:contrast()set动画图形设置filter:blur()（需要设置动画图形的父元素canvaswithfilter:contrast())表示在上面两个圆周运动的背后，叠加了一个大的白色背景filter:contrast()，而两个圆圈都设置了filter:blur()，两个条件缺一不可。当然，背景色不一定非得是白色。让我们稍微修改一下上面的Demo。简单示意图如下：燃烧火焰良好。介绍完上面的原理，我们再来看看利用这个效果做出的一些强大的CSS效果。最神奇的一个是使用Fusion效果来产生火焰。第一次看到这个效果是在作者YusukeNakaya：别怀疑你的眼睛，上面的GIF效果是用纯CSS实现的。核心还是filter:contrast()和filter:blur()一起使用，但是实现过程也很有意思，我们需要用CSS绘制一个火焰形状。火焰形状CSS核心代码如下：.fire{width:0;height:0;border-radius:45%;box-sizing:border-box;border:100pxsolid#000;border-bottom:100pxsolidtransparent;background-color:#b5932f;transform:scaleX(.4);filter:blur(20px)contrast(30);}大概是这样的：分解过程：放在纯黑色背景上，你会得到上图效果。这里会有一个大问题。添加滤镜后：blur(20px)contrast(30)；之后，为什么纯黑色和黄色中间有一个红色边框？这里咨询了几位设计师和前端同事，得到的答案大概是两种不同滤镜的色值处理算法在边界处叠加得到另一种颜色。（不一定准确，请赐教），尝试在PS中还原这个效果，但是PS没有contrast()滤镜，所以得到的效果偏差比较大。OK，继续正文，接下来，我们只需要在flame.firediv内部使用大量的黑色圆圈，从下到上，不规则地穿过火焰。由于过滤器的融合作用，产生了火焰效果。为了方便理解，我将背景色切换为白色。火焰动画的原理一目了然：完整的实现可以看这里：CodePenDemo—CSSfire|CSSfiltermix(https://codepen.io/Chokcoco/pen/GvbMmE)文字融合动画另外我们可以在动画过程中动态改变元素filter的filter:blur()的值。利用这种方法，我们还可以设计一些文字融合效果：具体实现可以看这里：CodePenDemo——文字动画|wordfilter(https://codepen.io/Chokcoco/pen/jLjNRj)值得注意的细节点动画虽然很漂亮，但是在实际使用过程中还是有一些需要注意的地方：CSSfilters可以为同时使用相同的元素，比如filter:contrast(150%)brightness(1.5)，但是filter的顺序不同效果也不同；即使用filter:contrast(150%)brightness(1.5)和filter:brightness(1.5)contrast(150%)处理同一张图片，效果不一样，原因在于颜色值处理的先后顺序过滤器的算法处理图像。滤镜动画需要大量计算，不断重绘页面。这是一个非常耗性能的动画。使用时要注意使用场景。记得开启硬件加速，合理使用分层技术；blur()混合了contrast()的滤镜效果，设置不同的颜色会产生不同的效果。这篇文章的作者对颜色叠加的具体算法不是很清楚，最好使用最好的方法是尝试不同的颜色并观察以获得最佳效果；CSS3滤镜兼容性不是很好，但是在移动端可以正常使用。如需更准确的兼容性列表，请查看CaniUse。上一篇CSS系列文章总结在我的Github（https://github.com/chokcoco/iCSS），持续更新。欢迎点个星订阅收藏。好了，本文到此结束，希望对你有所帮助：）
