圆角大杀器，使用滤镜构建圆角及波浪效果！

,本文，将另辟蹊径，介绍一种使用滤镜去构建圆角的独特方式。,首先，我们来看这样一个图形：,,一个矩形，没什么特别的，代码如下：,如果，我们现在需要给这个矩形的两端加上圆角，像是这样，该怎么做呢：,,So easy，不过就是加个 border-radius 而已：,好，那如果，不再是直线，而是一条曲线，希望曲线两端，带有圆角，像是这样，又该怎么办呢：,,到这，基本上触及了传统 CSS 的天花板，想通过一个属性搞定这个效果是不太可能了。,当然，有这样一种方式，通过首尾两端，利用两个伪元素，实现两个圆形，叠加上去：,,emm，这也是一个可行的方案，主要是定位会稍微有点点麻烦。那么除了这个方式以及直接使用 SVG 外，还有没有其他方法能够实现带圆角的曲线？,有！在 CSS 中，我们还可以通过 filter: contrast()​ 配合 filter: blur() 这对组合来实现这个图形。,在 神奇的滤镜！巧妙实现内凹的平滑圆角[1] 一文中，其实已经介绍过这个组合的另类用法。,经常阅读我的文章的小伙伴，对 filter: contrast()​ 配合 filter: blur() 的组合一定不陌生，上经典的一张图：,,单独将两个滤镜拿出来，它们的作用分别是：,但是，当他们“合体”的时候，产生了奇妙的融合现象。,仔细看两圆相交的过程，在边与边接触的时候，会产生一种边界融合的效果，通过对比度滤镜把高斯模糊的模糊边缘给干掉，利用高斯模糊实现融合效果。,当然，重点来了，blur 与 contrast 滤镜的组合不仅能用于这种融合效果，其特殊的性质使得它们的组合可以将直角变成圆角！,先看看之前的一个例子：,首先，我们只需要实现这样一个图形：,得到这样一个简单的图形：,,看到这里，肯定会疑惑，为什么这个图形需要用 3 层 div 嵌套的方式？不是一个 div 就足够了吗？,是因为我们又要运用 filter: contrast()​ 和 filter: blur() 这对神奇的组合。,我们简单改造一下上述代码，仔细观察和上述 CSS 的异同：,我们给 .g-content​ 添加了 filter: contrast(20)​ 和 background-color: white​，给 .g-filter​ 添加了 filter: blur(10px)。,神奇的事情发生了，我们得到了这样一个效果：,,通过对比度滤镜把高斯模糊的模糊边缘给干掉，将原本的直角，变成了圆角，Amazing。,通过一个 Gif 图更直观的感受：,,完整的代码你可以戳这里：CodePen Demo - Smooth concave rounded corners By filter[2],到这里，你应该知道如何通过直角圆弧得到圆角圆弧了。就是借助 filter: contrast()​ 配合 filter: blur() 的组合。,直接上代码：,效果如下：,,通过 Gif 看，更加直观：,,CodePen Demo -- Arc with rounded corners[3],好了，有了上面的铺垫，我们再来看一个有意思的。使用 filter: contrast()​ 配合 filter: blur() 实现波浪效果。,在之前，我们如果想使用纯 CSS，实现下述的波浪效果，是非常的困难的：,,这种波浪效果，通常会使用在优惠券等切图中：,,在之前，我们是怎么去做的呢？如果不切图，使用纯 CSS 的话，需要使用两层渐变进行叠加，大概是这样，感受一下：,,其代码也比较复杂，需要不断的调试渐变，使两个径向渐变吻合：,那么，如果使用 filter: contrast()​ 配合 filter: blur() 的话，整个过程将会变得非常简单。,我们只需要实现这样一个图形：,,这个图形使用渐变是容易得到的：,按照上文介绍的技巧，只需要应用上 filter: contrast()​ 配合 filter: blur()，就能将锐利的直角转化成圆角。我们尝试一下：,得到如下所示的波浪图形：,,我们希望它波浪的地方的确是波了，但是我们不希望的地方，它也变成了圆角：,,这是 filter: blur()​ 的一个问题，好在，我们是可以使用 backdrop-filter() 去规避掉这个问题的，我们简单改造下代码：,这样，我们就实现了一份完美的波浪效果：,,基于这种方式实现的波浪效果，我们甚至可以给它加上动画，让他动起来，也非常的好做，简单改造下代码：,通过一个简单的位移动画，并且使之首尾帧一致，看上去就是连续的：,,完整的代码，你可以戳这里：CodePen Demo -- Pure CSS Wave[4]。,本文介绍了一种使用 filter: contrast() 配合 filter: blur() 的方式，将直角图形变为圆角图形的方式，在一些特定的场景下，可能有着妙用。,不过，这种方式也有几个小缺陷：,当然，我觉得这两个小缺点瑕不掩瑜，在特定的场景下，此方式还是有一定的用武之地的。,本文到此结束，希望对你有帮助 :),[1]神奇的滤镜！巧妙实现内凹的平滑圆角: https://github.com/chokcoco/iCSS/issues/154。,[2]CodePen Demo - Smooth concave rounded corners By filter: https://codepen.io/Chokcoco/pen/JjroBPo。,[3]CodePen Demo -- Arc with rounded corners: https://codepen.io/Chokcoco/pen/bGveoPY。,[4]CodePen Demo -- Pure CSS Wave: https://codepen.io/Chokcoco/pen/PoRzeav。