本文，將另辟蹊徑，介紹一種使用濾鏡去構(gòu)建圓角的獨(dú)特方式。

首先，我們來(lái)看這樣一個(gè)圖形：

一個(gè)矩形，沒(méi)什么特別的，代碼如下：

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

如果，我們現(xiàn)在需要給這個(gè)矩形的兩端加上圓角，像是這樣，該怎么做呢：

So easy，不過(guò)就是加個(gè) border-radius 而已：

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

好，那如果，不再是直線，而是一條曲線，希望曲線兩端，帶有圓角，像是這樣，又該怎么辦呢：

到這，基本上觸及了傳統(tǒng) CSS 的天花板，想通過(guò)一個(gè)屬性搞定這個(gè)效果是不太可能了。

當(dāng)然，有這樣一種方式，通過(guò)首尾兩端，利用兩個(gè)偽元素，實(shí)現(xiàn)兩個(gè)圓形，疊加上去：

emm，這也是一個(gè)可行的方案，主要是定位會(huì)稍微有點(diǎn)點(diǎn)麻煩。那么除了這個(gè)方式以及直接使用 SVG 外，還有沒(méi)有其他方法能夠?qū)崿F(xiàn)帶圓角的曲線？

有！在 CSS 中，我們還可以通過(guò) filter: contrast()? 配合 filter: blur() 這對(duì)組合來(lái)實(shí)現(xiàn)這個(gè)圖形。

filter: contrast()? 配合 filter: blur() 的奇妙化學(xué)作用

在 神奇的濾鏡！巧妙實(shí)現(xiàn)內(nèi)凹的平滑圓角[1] 一文中，其實(shí)已經(jīng)介紹過(guò)這個(gè)組合的另類用法。

經(jīng)常閱讀我的文章的小伙伴，對(duì) filter: contrast()? 配合 filter: blur() 的組合一定不陌生，上經(jīng)典的一張圖：

單獨(dú)將兩個(gè)濾鏡拿出來(lái)，它們的作用分別是：

1. filter: blur()：給圖像設(shè)置高斯模糊效果。
2. filter: contrast()：調(diào)整圖像的對(duì)比度。

但是，當(dāng)他們“合體”的時(shí)候，產(chǎn)生了奇妙的融合現(xiàn)象。

仔細(xì)看兩圓相交的過(guò)程，在邊與邊接觸的時(shí)候，會(huì)產(chǎn)生一種邊界融合的效果，通過(guò)對(duì)比度濾鏡把高斯模糊的模糊邊緣給干掉，利用高斯模糊實(shí)現(xiàn)融合效果。

當(dāng)然，重點(diǎn)來(lái)了，blur 與 contrast 濾鏡的組合不僅能用于這種融合效果，其特殊的性質(zhì)使得它們的組合可以將直角變成圓角！

先看看之前的一個(gè)例子：

首先，我們只需要實(shí)現(xiàn)這樣一個(gè)圖形：

<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);
        }
    }
}

得到這樣一個(gè)簡(jiǎn)單的圖形：

看到這里，肯定會(huì)疑惑，為什么這個(gè)圖形需要用 3 層 div 嵌套的方式？不是一個(gè) div 就足夠了嗎？

是因?yàn)槲覀冇忠\(yùn)用 filter: contrast()? 和 filter: blur() 這對(duì)神奇的組合。

我們簡(jiǎn)單改造一下上述代碼，仔細(xì)觀察和上述 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)。

神奇的事情發(fā)生了，我們得到了這樣一個(gè)效果：

通過(guò)對(duì)比度濾鏡把高斯模糊的模糊邊緣給干掉，將原本的直角，變成了圓角，Amazing。

通過(guò)一個(gè) Gif 圖更直觀的感受：

完整的代碼你可以戳這里：CodePen Demo - Smooth concave rounded corners By filter[2]

通過(guò)濾鏡實(shí)現(xiàn)圓角圓弧

到這里，你應(yīng)該知道如何通過(guò)直角圓弧得到圓角圓弧了。就是借助 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%;
}

效果如下：

通過(guò) Gif 看，更加直觀：

CodePen Demo -- Arc with rounded corners[3]

使用 filter: contrast()? 配合 filter: blur() 實(shí)現(xiàn)波浪效果

好了，有了上面的鋪墊，我們?cè)賮?lái)看一個(gè)有意思的。使用 filter: contrast()? 配合 filter: blur() 實(shí)現(xiàn)波浪效果。

在之前，我們?nèi)绻胧褂眉?CSS，實(shí)現(xiàn)下述的波浪效果，是非常的困難的：

這種波浪效果，通常會(huì)使用在優(yōu)惠券等切圖中：

在之前，我們是怎么去做的呢？如果不切圖，使用純 CSS 的話，需要使用兩層漸變進(jìn)行疊加，大概是這樣，感受一下：

其代碼也比較復(fù)雜，需要不斷的調(diào)試漸變，使兩個(gè)徑向漸變吻合：

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() 的話，整個(gè)過(guò)程將會(huì)變得非常簡(jiǎn)單。

我們只需要實(shí)現(xiàn)這樣一個(gè)圖形：

這個(gè)圖形使用漸變是容易得到的：

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

按照上文介紹的技巧，只需要應(yīng)用上 filter: contrast()? 配合 filter: blur()，就能將銳利的直角轉(zhuǎn)化成圓角。我們嘗試一下：

<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)
}

可以寫(xiě)在 1 個(gè) DIV 里面（通過(guò)元素和它的偽元素構(gòu)造父子關(guān)系），也可以用 2 個(gè)，都可以，問(wèn)題不大。

得到如下所示的波浪圖形：

我們希望它波浪的地方的確是波了，但是我們不希望的地方，它也變成了圓角：

這是 filter: blur()? 的一個(gè)問(wèn)題，好在，我們是可以使用 backdrop-filter() 去規(guī)避掉這個(gè)問(wèn)題的，我們簡(jiǎn)單改造下代碼：

.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%;
}

這樣，我們就實(shí)現(xiàn)了一份完美的波浪效果：

部分同學(xué)可能對(duì)上面的 padding-top 100px 有所疑惑，這個(gè)也是目前我所發(fā)現(xiàn)的一個(gè) BUG，暫未解決，不影響使用，你可以嘗試將 padding-top: 100px 替換成 height: 100px。

基于這種方式實(shí)現(xiàn)的波浪效果，我們甚至可以給它加上動(dòng)畫(huà)，讓他動(dòng)起來(lái)，也非常的好做，簡(jiǎn)單改造下代碼：

.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);
    }
}

通過(guò)一個(gè)簡(jiǎn)單的位移動(dòng)畫(huà)，并且使之首尾幀一致，看上去就是連續(xù)的：

完整的代碼，你可以戳這里：CodePen Demo -- Pure CSS Wave[4]。

總結(jié)一下

本文介紹了一種使用 filter: contrast() 配合 filter: blur() 的方式，將直角圖形變?yōu)閳A角圖形的方式，在一些特定的場(chǎng)景下，可能有著妙用。

不過(guò)，這種方式也有幾個(gè)小缺陷：

1. 使用了filter: contrast() 之后，圖形的尺寸可能相對(duì)而言會(huì)縮小一點(diǎn)點(diǎn)，要達(dá)到固定所需尺寸的話，要一定的調(diào)試
2. 此方式產(chǎn)生的圖形，畢竟經(jīng)過(guò)了一次filter: blur()，放大來(lái)看圖形會(huì)有一定的鋸齒，可以通過(guò)調(diào)整 contrast 和 blur 的大小盡可能的去除，但是沒(méi)法完全去掉

當(dāng)然，我覺(jué)得這兩個(gè)小缺點(diǎn)瑕不掩瑜，在特定的場(chǎng)景下，此方式還是有一定的用武之地的。

最后

本文到此結(jié)束，希望對(duì)你有幫助 :)

參考資料

[1]神奇的濾鏡！巧妙實(shí)現(xiàn)內(nèi)凹的平滑圓角: 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。