這篇文章帶大家另闢蹊徑，聊聊使用CSS濾鏡建構(gòu)圓角的方法，並利用圓角聊聊實現(xiàn)波浪效果的方法，希望對大家有幫助！

【學(xué)習(xí)影片分享：css影片教學(xué)、web前端】

首先，我們來看這樣一個圖形：

一個矩形，沒什麼特別的，程式碼如下：

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

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

#So easy，不過就是加個border-radius 而已：

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

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

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

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

filter: contrast() 來配合 filter: blur() 這對組合來實現(xiàn)這個圖形。

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

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

filter: contrast() 配合filter: blur() 的組合一定不陌生，上經(jīng)典的一張圖：

• ##filter: blur ()

  ： 給影像設(shè)定高斯模糊效果。

• filter: contrast()

  ： 調(diào)整影像的對比。

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

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

當(dāng)然，重點來了，

先看看之前的一個例子：

首先，我們只需要實作這樣一個圖形：

<div>
????<div>
????????<div></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 就足夠了嗎？

是因為我們又要運(yùn)用

和 filter: blur() 這對神奇的組合。 我們簡單改造上述程式碼，仔細(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);
????????}
????}
}

我們給

加了filter: contrast(20 ) 和background-color: white，給.g-filter 加了filter: blur(10px)。 神奇的事情發(fā)生了，我們得到了這樣一個效果：

#透過對比度濾鏡把高斯模糊的模糊邊緣給幹掉，

，Amazing。 透過一個Gif 圖表更直覺的感受：

完整的程式碼你可以戳這裡：CodePen Demo - Smooth concave rounded corners By filter

通過濾鏡實現(xiàn)圓角圓弧

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

CodePen Demo -- Arc with rounded corners

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

好了，有了上面的鋪墊，我們再來看一個有意思的。使用 filter: contrast() 配合 filter: blur() 實現(xiàn)波浪效果。

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

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

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

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

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-另闢蹊徑！看看使用CSS濾鏡怎麼建構(gòu)圓角和波浪效果:?radial-gradient(circle?at?-5px?10px,?transparent?12px,?#fff?13px,?#fff?0px);
????????background-size:?20px?20px;
????????background-position:?0?15px;
????}
????&::after?{
????????width:?15px;
????????background-另闢蹊徑！看看使用CSS濾鏡怎麼建構(gòu)圓角和波浪效果:?radial-gradient(circle?at?15px?10px,?#fff?12px,?transparent?13px,?transparent?0px);
????????background-size:?20px?40px;
????????background-position:?0?15px;
????}
}

那么，如果使用 filter: contrast() 配合 filter: blur() 的話，整個過程將會變得非常簡單。

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

這個圖形使用漸變是容易得到的：

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>
????<div></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 里面（通過元素和它的偽元素構(gòu)造父子關(guān)系），也可以用 2 個，都可以，問題不大。

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

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

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

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

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

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

基于這種方式實現(xià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);
????}
}

通過一個簡單的位移動畫，并且使之首尾幀一致，看上去就是連續(xù)的：

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

SVG 濾鏡，讓使用更簡單

這就結(jié)束了嗎？沒有！上述雙濾鏡的組合固然強(qiáng)大，確實還是有一點麻煩。

再補(bǔ)充一種 SVG 濾鏡的方案。這里，對于大部分場景，我們可以借助 SVG 濾鏡，在 CSS 中一行引入，實現(xiàn)同樣的功能。

看這樣一個 DEMO，我們有這樣一個三角形：

我們想通過它得到一個圓角三角形：

借助 SVG 濾鏡，其實也可以快速達(dá)成，省去了上面還需要疊加一個 filter: contrast() 的煩惱：

<div></div>
<svg>
????<filter>
??????<fegaussianblur></fegaussianblur>
??????<fecomponenttransfer>
??????????<fefunca></fefunca>
??????</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:另闢蹊徑！看看使用CSS濾鏡怎麼建構(gòu)圓角和波浪效果/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

總結(jié)一下

本文介紹了一種使用 filter: contrast() 配合 filter: blur() 的方式，將直角圖形變?yōu)閳A角圖形的方式，在一些特定的場景下，可能有著妙用。同時，在很多場景下，可以使用 SVG 濾鏡簡化操作。

不過，這種方式也有幾個小缺陷：

• 使用了 filter: contrast() 之后，圖形的尺寸可能相對而言會縮小一點點，要達(dá)到固定所需尺寸的話，要一定的調(diào)試

• 此方式產(chǎn)生的圖形，畢竟經(jīng)過了一次 filter: blur()，放大來看圖形會有一定的鋸齒，可以通過調(diào)整 contrast 和 blur 的大小盡可能的去除，但是沒法完全去掉

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

原文地址：https://www.cnblogs.com/coco1s/p/16516585.html

作者：ChokCoco

更多編程相關(guān)知識，請訪問：編程視頻！！

以上是另闢蹊徑！看看使用CSS濾鏡怎麼建構(gòu)圓角和波浪效果的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！