圆角杀手，使用滤镜制作圆角和波浪效果
时间：2023-03-28 13:03:10
HTML
本文将另辟蹊径，介绍一种独特的使用滤镜制作圆角的方法。首先我们来看这样一个图形：一个矩形，没什么特别的，代码如下：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()结合，神奇的滤镜产生奇妙的化学效果！凹圆角的巧妙实现文中其实已经介绍了这种组合的另类用法。经常看我文章的朋友一定对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）；我们在.g-content中添加了filter:contrast(20)和background-color:white，在.g-filter中添加了filter:blur(10px)。神奇的事情发生了，我们得到了这样一个效果：通过contrastfilter，消除了高斯模糊的模糊边缘，原来的直角变成了圆角，Amazing。通过一张Gif图获得更直观的感受：完整代码可以点这里：CodePenDemo-平滑凹圆角通过滤镜实现圆弧通过滤镜到这里你应该知道如何通过直角得到圆弧了上弧。它是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--圆角圆弧使用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）；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--纯CSSWaveSVG滤镜更易用到此结束了吗？不！上面说的双滤镜组合起来很厉害，但是确实有点麻烦。在强大群友的补充下，再添一个SVG滤镜方案。在这里，对于大多数场景，我们可以使用SVG滤镜在CSS中一行导入来实现同样的功能。看这样一个DEMO，我们有这样一个三角形：我们想通过它得到一个圆角三角形：借助SVG滤镜，可以快速实现，省去了在上面叠加滤镜contrast()的麻烦：