圆角杀手，使用滤镜制作圆角和波浪效果！_0
时间：2023-03-19 13:15:00
科技观察
本文将另辟蹊径，介绍一种使用滤镜制作圆角的独特方式。首先我们来看这样一个图形：一个矩形，没什么特别的，代码如下：div{width:200px;高度：40px；background-color:#000;}如果我们现在需要像这样添加圆角，怎么做：很简单，但只需添加一个border-radius:div{width:200px;高度：40px；+边框半径：40px；background-color:#000;}，如果不再是直线，而是曲线，又希望曲线的两端有圆角怎么办，像这样，怎么办？至此，我已经基本摸到了传统CSS的天花板，想通过一个属性是不可能达到这种效果的。当然还有一种方法，就是在首尾两端使用两个伪元素，实现两个圆圈叠加：emm，这也是一个可行的方案，主要是定位会有点麻烦。那么除了这种方式直接使用SVG，还有没有其他的方式来实现圆角曲线呢？有！在CSS中，我们也可以通过filter:contrast()和filter:blur()的组合来实现这个图形。filter:contrast()配合filter:blur()打造神奇滤镜！在《巧妙实现凹面光滑圆角[1]》一文中，其实已经介绍了这种组合的另类用法。经常看我文章的朋友一定对filter:contrast()和filter:blur()的组合不陌生。这里有一张经典的图：分别取出两个滤镜，它们的作用是：filter:blur():给图像设置高斯模糊效果。filter:contrast()：调整图像的对比度。然而，当它们“合体”时，却发生了奇妙的融合现象。仔细看两个圆相交的过程。当边缘相互接触时，会产生边界融合效应。通过contrastfilter消除高斯模糊的模糊边缘，利用高斯模糊达到融合效果。当然，重点是模糊和对比度滤镜的组合不仅可以用于这种融合效果，它的特殊属性使得它们的组合可以将直角变成圆角！我们先来看一个例子：首先我们只需要实现这样一个图形：
.g-container{位置：相对；宽度：300px；高度：100px；.g-content{高度：100px；（圆圈在50%-10px，透明0，透明39px，#00040px，#000）；}}}得到这么一个简单的图形：看到这里，你肯定会奇怪为什么这个图形需要嵌套3层div的方式？一个div还不够吗？这是因为我们必须再次使用filter:contrast()和filter:blur()的神奇组合。我们简单修改一下上面的代码，仔细观察一下和上面CSS的异同点：宽度：300px；高度：100px；.g-content{高度：100px；过滤器：对比度（20）；背景色：白色；溢出：隐藏；.g-filter{过滤器：模糊（10px）；高度：100px；背景：径向渐变（圆形50%-10px，透明0，透明29px，#00040px，#000）；我们添加了filter:contrast(20)和background-color:white到.g-content，以及filter:blur(10px)到.g-filter。神奇的事情发生了，我们得到了这样一个效果：通过contrastfilter，消除了高斯模糊的模糊边缘，原来的直角变成了圆角，Amazing。通过一张Gif图更直观的感受：完整代码可以点这里：CodePenDemo-SmoothconvaveroundedcornersByfilter[2]通过filter实现圆角至此，你应该知道如何通过一个right得到一个圆了-angledarc角是圆的。它是filter:contrast()和filter:blur()的组合。直接放代码：div{position:relative;宽度：250px；高度：250px；过滤器：对比度（20）；背景色：#fff；溢出：隐藏；}div::before{内容：“”；位置：绝对；顶部：0；左：0；底部：0；右：0；过滤器：模糊（7px）；边框：25px实心透明；border-bottom:25pxsolid#000;border-radius:50%;}效果如下：看Gif，更直观：CodePenDemo--Arcwithroundedcorners[3]使用filter:contrast()和filter:blur()实现波浪效应。有了上面的铺垫，我们再来看一个有趣的。使用filter:contrast()和filter:blur()来实现波浪效果。以前如果想用纯CSS实现下面的波浪效果是很困难的：这种波浪效果一般用在优惠券等抠图上：我们以前是怎么做到的？如果不切图，使用纯CSS，需要用两层渐变叠加，大概是这样的。感受一下：代码也比较复杂，需要不断调试渐变，让两个径向渐变匹配：div{position:relative;宽度：400px；高度：160px；背景：线性渐变（90deg，#9457000%，#f49714100%）；&::before,&::after{内容：“”；位置：绝对；顶部：0；右：0；底部：0；}&::before{宽度：10px;背景图像：径向渐变（圆形-5px10px，透明12px，#fff13px，#fff0px）；背景大小：20px20px；背景位置：015px；}&::after{宽度：15px；背景图像：径向渐变（圆圈在15px10px，#fff12px，透明13px，透明0px）；背景大小：20px40px；背景位置：015px；那么，如果你使用filter:contrast()和filter:blur()，整个过程就会变得非常简单。我们只需要实现这样一个图形：这个图形使用渐变很容易得到：div{background:radial-gradient(circleat20px0,transparent,transparent20px,#00021px,#00040px);background-size:80px100%;}按照上面介绍的技巧，只需要配合filter:contrast()和filter:blur()一起使用，就可以将尖锐的直角转成圆角。让我们试试：
.g-container{position:relative;保证金：自动；高度：200px；填充-顶部：100px；过滤器：对比度（20）；背景色：#fff；溢出：隐藏；}.g-inner{位置：相对；高度：200px；背景：径向渐变（圆形20px0，透明，透明20px，#00021px，#00040px）；背景大小：80px100%；filter:blur(10px)}可以写在DIV中（通过元素及其伪元素构建父子关系），也可以用2，都可以，没问题。得到如下图的波浪图形：我们要它波浪的地方确实是波浪，但是我们不想要的地方，它也变成了圆角：这是filter:blur()的问题，幸运的是，我们可以使用backdrop-filter()来避免这个问题。我们简单修改一下代码：.g-container{position:relative;宽度：380px；填充顶部：100px；过滤器：对比度（20）；背景色：#fff；溢出：隐藏；&::之前{内容：“”；位置：绝对；顶部：0；左：0；底部：0；右：0；背景滤镜：模糊（10px）；z-索引：1；}}.g-inner{位置：相对；宽度：380px；高度：100px；背景：径向渐变（圆形20px0，透明，透明20px，#00021px，#00040px）；background-size:80px100%;}这样我们就实现了一个完美的波浪效果：可能有同学对上面的padding-top100px有疑惑。这也是我目前发现的一个bug。目前还没有解决，不影响使用，可以试试把padding-top:100px换成height:100px试试。基于这样实现的波浪效果，我们甚至可以给它加上动画让它动起来，这也是非常容易做到的。简单修改代码：.g-inner{position:relative;-宽度：380px；+宽度：480像素；高度：100px；背景：径向渐变（圆形20px0，透明，透明20px，#00021px，#00040px）；背景大小：80px100%；+动画：移动1s无限线性；}@keyframesmove{100%{transform:translate(-80px,0);}}通过一个简单的位移动画，并使首帧和末帧保持一致，看起来是连续的：完整代码，可以点击这里：CodePenDemo--PureCSSWave[4]。综上所述，本文介绍一种使用filter:contrast()和filter:blur()将矩形图形变成圆形图形的方法。在某些特定场景下，它可能会产生神奇的效果。不过这种方法也有几个小缺陷：使用filter:contrast()后，图形的尺寸可能会相对缩小一点点。要达到固定的要求尺寸，需要对这种方法生成的图形进行调试。毕竟经过filter:blur()后，放大时图形会出现一定程度的锯齿，可以通过调整contrast和blur的大小，尽量去掉，但是不能完全删除它们。在特定的场景下，这种方式还是有一定的用武之地的。最后，本文到此结束，希望对您有所帮助：）参考资料[1]Fantasticfilter！巧妙实现凹圆角光滑：https://github.com/chokcoco/iCSS/issues/154。[2]CodePenDemo-光滑的凹圆角通过过滤器：https://codepen.io/Chokcoco/pen/JjroBPo。[3]CodePenDemo--圆角圆弧：https://codepen.io/Chokcoco/pen/bGveoPY。[4]CodePenDemo--PureCSSWave：https://codepen.io/Chokcoco/pen/PoRzeav。
