关于前端:圆角大杀器使用滤镜构建圆角及波浪效果

41次阅读

共计 6004 个字符，预计需要花费 16 分钟才能阅读完成。

本文，将另辟蹊径，介绍一种应用滤镜去构建圆角的独特形式。

首先，咱们来看这样一个图形：

一个矩形，没什么特地的，代码如下：

div {
    width: 200px;
    height: 40px;
    background-color: #000;
}

如果，咱们当初须要给这个矩形的两端加上 圆角，像是这样，该怎么做呢：

So easy，不过就是加个 border-radius 而已：

div {
    width: 200px;
    height: 40px;
  + border-radius: 40px;
    background-color: #000;
}

好，那如果，不再是直线，而是一条曲线，心愿曲线两端，带有圆角，像是这样，又该怎么办呢：

到这，基本上涉及了传统 CSS 的天花板，想通过一个属性搞定这个成果是不太可能了。

当然，有这样一种形式，通过首尾两端，利用两个伪元素，实现两个圆形，叠加下来：

emm，这也是一个可行的计划，次要是定位会略微有点点麻烦。那么除了这个形式以及间接应用 SVG 外，还有没有其余办法可能实现带圆角的曲线？

有！在 CSS 中，咱们还能够通过 filter: contrast() 配合 filter: blur() 这对组合来实现这个图形。

filter: contrast() 配合 filter: blur() 的微妙化学作用

在 神奇的滤镜！奇妙实现内凹的平滑圆角 一文中，其实曾经介绍过这个组合的另类用法。

常常浏览我的文章的小伙伴，对 filter: contrast() 配合 filter: blur() 的组合肯定不生疏，上经典的一张图：

独自将两个滤镜拿进去，它们的作用别离是：

  1. filter: blur()：给图像设置高斯含糊成果。
  2. filter: contrast()：调整图像的对比度。

然而，当他们“合体”的时候，产生了微妙的交融景象。

认真看两圆相交的过程，在边与边接触的时候，会产生一种边界交融的成果，通过对比度滤镜把高斯含糊的含糊边缘给干掉，利用高斯含糊实现交融成果。

当然，重点来了，blur 与 contrast 滤镜的组合不仅能用于这种交融成果，其非凡的性质使得它们的组合能够将直角变成圆角！

先看看之前的一个例子：

首先，咱们只须要实现这样一个图形：

<div class="g-container">
    <div class="g-content">
        <div class="g-filter"></div>
    </div>
</div>
.g-container {
    position: relative;
    width: 300px;
    height: 100px;
    
    .g-content {
        height: 100px;
        
        .g-filter {
            height: 100px;
            background: radial-gradient(circle at 50% -10px, transparent 0, transparent 39px, #000 40px, #000);
        }
    }
}

失去这样一个简略的图形：

看到这里，必定会纳闷，为什么这个图形须要用 3 层 div 嵌套的形式？不是一个 div 就足够了吗？

是因为咱们又要使用 filter: contrast() 和 filter: blur() 这对神奇的组合。

咱们简略革新一下上述代码，仔细观察和上述 CSS 的异同：

.g-container {
    position: relative;
    width: 300px;
    height: 100px;
    
    .g-content {
        height: 100px;
        filter: contrast(20);
        background-color: white;
        overflow: hidden;
        
        .g-filter {filter: blur(10px);
            height: 100px;
            background: radial-gradient(circle at 50% -10px, transparent 0, transparent 29px, #000 40px, #000);
        }
    }
}

咱们给 .g-content 增加了 filter: contrast(20) 和 background-color: white，给 .g-filter 增加了 filter: blur(10px)。

神奇的事件产生了，咱们失去了这样一个成果：

通过对比度滤镜把高斯含糊的含糊边缘给干掉，将本来的直角，变成了圆角，Amazing。

通过一个 Gif 图更直观的感触：

残缺的代码你能够戳这里：CodePen Demo – Smooth concave rounded corners By filter

通过滤镜实现圆角圆弧

到这里，你应该晓得如何通过直角圆弧失去圆角圆弧了。就是借助 filter: contrast() 配合 filter: blur() 的组合。

间接上代码：

div {
    position: relative;
    width: 250px;
    height: 250px;
    filter: contrast(20);
    background-color: #fff;
    overflow: hidden;
}
div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    filter: blur(7px);
    border: 25px solid transparent;
    border-bottom: 25px solid #000;
    border-radius: 50%;
}

成果如下：

通过 Gif 看，更加直观：

CodePen Demo — Arc with rounded corners

应用 filter: contrast() 配合 filter: blur() 实现波浪成果

好了，有了下面的铺垫，咱们再来看一个有意思的。应用 filter: contrast() 配合 filter: blur() 实现波浪成果。

在之前，咱们如果想应用纯 CSS，实现下述的波浪成果，是十分的艰难的：

这种波浪成果，通常会应用在 优惠券 等切图中：

在之前，咱们是怎么去做的呢？如果不切图，应用纯 CSS 的话，须要应用两层突变进行叠加，大略是这样，感受一下：

其代码也比较复杂，须要一直的调试突变，使两个径向突变吻合：

div {
    position: relative;
    width: 400px;
    height: 160px;
    background: linear-gradient(90deg, #945700 0%, #f49714 100%);
    
    &::before,
    &::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom :0;
    }
    &::before {
        width: 10px;
        background-image: radial-gradient(circle at -5px 10px, transparent 12px, #fff 13px, #fff 0px);
        background-size: 20px 20px;
        background-position: 0 15px;
    }
    &::after {
        width: 15px;
        background-image: radial-gradient(circle at 15px 10px, #fff 12px, transparent 13px, transparent 0px);
        background-size: 20px 40px;
        background-position: 0 15px;
    }
}

那么，如果应用 filter: contrast() 配合 filter: blur() 的话，整个过程将会变得非常简单。

咱们只须要实现这样一个图形：

这个图形应用突变是容易失去的：

div {background: radial-gradient(circle at 20px 0, transparent, transparent 20px, #000 21px, #000 40px);
    background-size: 80px 100%;
}

依照上文介绍的技巧，只须要利用上 filter: contrast() 配合 filter: blur()，就能将锐利的直角转化成圆角。咱们尝试一下：

<div class="g-container">
    <div class="g-inner"></div>
</div>
.g-container {
    position: relative;
    margin: auto;
    height: 200px;
    padding-top: 100px;
    filter: contrast(20);
    background-color: #fff;
    overflow: hidden;
}

.g-inner {
    position: relative;
    height: 200px;
    background: radial-gradient(circle at 20px 0, transparent, transparent 20px, #000 21px, #000 40px);
    background-size: 80px 100%;
    filter: blur(10px)
}

能够写在 1 个 DIV 外面（通过元素和它的伪元素结构父子关系），也能够用 2 个，都能够，问题不大。

失去如下所示的波浪图形：

咱们心愿它波浪的中央确实是波了，然而咱们不心愿的中央，它也变成了圆角：

这是 filter: blur() 的一个问题，好在，咱们是能够应用 backdrop-filter() 去躲避掉这个问题的，咱们简略革新下代码：

.g-container {
    position: relative;
    width: 380px;
    padding-top: 100px;
    filter: contrast(20);
    background-color: #fff;
    overflow: hidden;
    
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        backdrop-filter: blur(10px);
        z-index: 1;
    }
}
.g-inner {
    position: relative;
    width: 380px;
    height: 100px;
    background: radial-gradient(circle at 20px 0, transparent, transparent 20px, #000 21px, #000 40px);
    background-size: 80px 100%;
}

这样，咱们就实现了一份完满的波浪成果：

局部同学可能对下面的 padding-top 100px 有所纳闷，这个也是目前我所发现的一个 BUG，暂未解决，不影响应用，你能够尝试将 padding-top: 100px 替换成 height: 100px。

基于这种形式实现的波浪成果，咱们甚至能够给它加上动画，让他动起来，也十分的好做，简略革新下代码：

.g-inner {
    position: relative;
  - width: 380px;
  + width: 480px;
    height: 100px;
    background: radial-gradient(circle at 20px 0, transparent, transparent 20px, #000 21px, #000 40px);
    background-size: 80px 100%;
  + animation: move 1s infinite linear; 
}

@keyframes move {
    100% {transform: translate(-80px, 0);
    }
}

通过一个简略的位移动画，并且使之首尾帧统一，看上去就是间断的：

残缺的代码，你能够戳这里：CodePen Demo — Pure CSS Wave

SVG 滤镜，让应用更简略

这就完结了吗？没有！上述双滤镜的组合诚然弱小，的确还是有一点麻烦。

在弱小的群友的补充下，再补充一种 SVG 滤镜的计划。这里，对于大部分场景，咱们能够借助 SVG 滤镜，在 CSS 中一行引入，实现同样的性能。

看这样一个 DEMO，咱们有这样一个三角形：

咱们想通过它失去一个圆角三角形：

借助 SVG 滤镜，其实也能够疾速达成，省去了下面还须要叠加一个 filter: contrast() 的懊恼：

<div class="g-triangle"></div>
<svg width="0">
    <filter id="blur" color-interpolation-filters="sRGB">
      <feGaussianBlur stdDeviation="10" />
      <feComponentTransfer>
          <feFuncA type="table" tableValues="0 0 10"/>
      </feComponentTransfer>
    </filter>
</svg>
div {
        border: 60px solid transparent;
        border-left: 120px solid #f48;
        filter: url(#blur);
}

成果如下：

是的，利用 filter: url(xxx) 能够疾速引入一个定义好的 SVG 滤镜。也能够这样，间接嵌入到 URL 中：

div {
        border: 60px solid transparent;
        border-left: 120px solid #f48;
        filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='blur'color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='10'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table'tableValues='0 0 10'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3C/svg%3E#blur");
}

残缺的代码，你能够戳这里：CodePen Demo — triangle with rounded corners and shadow

总结一下

本文介绍了一种应用 filter: contrast() 配合 filter: blur() 的形式，将直角图形变为圆角图形的形式，在一些特定的场景下，可能有着妙用。同时，在很多场景下，能够应用 SVG 滤镜简化操作。

不过，这种形式也有几个小缺点：

  1. 应用了 filter: contrast() 之后，图形的尺寸可能相对而言会放大一点点，要达到固定所需尺寸的话，要肯定的调试
  2. 此形式产生的图形，毕竟通过了一次 filter: blur()，放大来看图形会有肯定的锯齿，能够通过调整 contrast 和 blur 的大小尽可能的去除，然而没法齐全去掉

当然，我感觉这两个小毛病瑕不掩瑜，在特定的场景下，此形式还是有肯定的用武之地的。

最初

本文到此结束，心愿对你有帮忙 :)

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。

正文完
前端
发表至： 前端
2022-07-25
 0
关于前端:SpringCloud微服务架构实战开发游戏环境的准备
关于前端:用明道云APaaS直击商业培训痛点实现高效管理
关于前端:XMLHttpRequest对象解析
关于前端:重构使用-Hooks-让代码更易于变更