神奇的濾鏡！巧妙實(shí)現(xiàn)內(nèi)凹的平滑圓角
作者：chokcoco
來源：SegmentFault 思否社區(qū)
背景
某日，群友們?cè)谌豪飹伋鲞@樣一個(gè)問題，如何使用 CSS 實(shí)現(xiàn)如下的布局：
在 CSS 世界中，如果只是下述這種效果，還是非常容易實(shí)現(xiàn)的：
一旦涉及到圓角或者波浪效果，難度就會(huì)提升很多。
實(shí)現(xiàn)這種連續(xù)平滑的曲線其實(shí)是比較麻煩的，當(dāng)然，也不是完全沒有辦法。本文，就會(huì)帶大家看看，使用 CSS 實(shí)現(xiàn)上述內(nèi)凹平滑圓角效果的一些可能的方式。
利用圓的銜接實(shí)現(xiàn)
第一種方法比較笨。我們可以使用多個(gè)圓的銜接實(shí)現(xiàn)。
首先，我們會(huì)實(shí)現(xiàn)一個(gè)內(nèi)部挖出一個(gè)矩形的矩形：
<div></div>
核心 CSS 代碼如下：
div {
height: 200px;
background:
linear-gradient(90deg, #9c27b0, #9c27b0 110px, transparent 110px, transparent 190px, #9c27b0 190px),
linear-gradient(90deg, #9c27b0, #9c27b0);
background-size: 100% 20px, 100% 100%;
background-position: 0 0, 0 20px;
background-repeat: no-repeat;
}
得到這樣一個(gè)圖形（實(shí)現(xiàn)的方式有很多，這里我利用的是漸變）：
接下來，就是通過偽元素去疊加三個(gè)圓，大概是這樣：
div {
...
&::before {
position: absolute;
content: "";
width: 40px;
height: 40px;
border-radius: 50%;
background: #000;
left: 90px;
box-shadow: 40px 0 0 #000, 80px 0 0 #000;
}
}
稍微，修改一下三個(gè)圓的顏色，我們就可以得到如下的效果：
可以看到，這種通過 3 個(gè)圓的疊加實(shí)現(xiàn)的效果并不是太好，只能說是勉強(qiáng)還原，如果背景色不是純色，就穿幫了：
完整的代碼鏈接：https://codepen.io/Chokcoco/pen/oNGgyeK
通過 filter 實(shí)現(xiàn)
下面，是本文的重點(diǎn)，將介紹一種利用濾鏡實(shí)現(xiàn)該效果的方式。
一聽到濾鏡，你可能會(huì)比較詫異，啊？這個(gè)效果好像和濾鏡應(yīng)該扯不上什么關(guān)系吧？
下面，就是見證奇跡的時(shí)刻。
首先，我們只需要實(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è)效果：
通過對(duì)比度濾鏡把高斯模糊的模糊邊緣給干掉，將原本的直角，變成了圓角，Amazing。
通過一個(gè) Gif 圖更直觀的感受：
這里有幾個(gè)細(xì)節(jié)需要注意：
.g-content 這一層需要設(shè)置 background、需要 overflow: hidden（可以自己嘗試去掉看看效果）
外側(cè)的直角也變成了圓角
.g-container {
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
background: radial-gradient(circle at 50% -10px, transparent 0, transparent 60px, #000 60px, #000 0);
}
}
最后
