This article will take you to find a new way to talk about how to use CSS filters to create rounded corners, and how to use rounded corners to achieve the wave effect. I hope it will be helpful to everyone!

[Learning video sharing: css video tutorial, web front-end]

First, let’s take a look Such a graphic:

A rectangle, nothing special, the code is as follows:

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

If, we now need to add # to both ends of this rectangle ##Rounded corners, like this, how to do it:

So easy, just add a

border-radius:

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

Okay, what if it is no longer a straight line, but a curve, and I hope that both ends of the curve have rounded corners, like this:

At this point, we have basically reached the ceiling of traditional CSS. It is impossible to achieve this effect through one attribute.

Of course, there is a way to use two pseudo-elements at the beginning and end to realize two circles and superimpose them:

emm , this is also a feasible solution, mainly because positioning will be a little troublesome. So besides this method and using SVG directly, is there any other way to achieve curves with rounded corners?

have! In CSS, we can also achieve this graphic through the combination of

filter: contrast() and filter: blur().

filter: contrast() Combined with the wonderful chemical effect of filter: blur()

is a magical filter in

! In the article Cleverly Achieving Concave Smooth Rounded Corners, we have already introduced alternative uses of this combination.

Friends who often read my articles must be familiar with the combination of

filter: contrast() and filter: blur(). Here is a classic one Picture:

Take out the two filters separately. Their functions are:

• filter: blur (): Set a Gaussian blur effect to the Find another way! See how to use CSS filters to create rounded corners and wavy effects.

• filter: contrast(): Adjust the contrast of the Find another way! See how to use CSS filters to create rounded corners and wavy effects.

However, when they "fused" together, a wonderful fusion phenomenon occurred.

Look carefully at the process of intersecting two circles. When the edges touch each other, a boundary fusion effect will be produced. Use the contrast filter to remove the blurred edges of Gaussian blur, and use Gaussian blur to achieve the fusion effect. .

Of course, here comes the key point. The combination of

blur and contrast filters can not only be used for this blending effect, but their special properties allow their combination to turn right angles into rounded corners!

Let’s take a look at the previous example:

First of all, we only need to implement such a graphic:

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

Get such a simple graphic:

When you see this, you will definitely wonder why this graphic needs to be nested with 3 layers of divs? Wouldn't a div be enough?

is because we have to use the magical combination of

filter: contrast() and filter: blur().

Let’s simply transform the above code and carefully observe the similarities and differences with the above 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);
????????}
????}
}

We added

filter: contrast(20 ) and background-color: white, added filter: blur(10px) to .g-filter. A magical thing happened, we got such an effect:

Use the contrast filter to remove the blurry edges of the Gaussian blur, Turn the original right angle into a rounded corner

, Amazing.

Get a more intuitive feeling through a Gif:

You can click here for the complete code:

CodePen Demo - Smooth concave rounded corners By filter

通過(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

使用 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-Find another way! See how to use CSS filters to create rounded corners and wavy effects:?radial-gradient(circle?at?-5px?10px,?transparent?12px,?#fff?13px,?#fff?0px);
????????background-size:?20px?20px;
????????background-position:?0?15px;
????}
????&::after?{
????????width:?15px;
????????background-Find another way! See how to use CSS filters to create rounded corners and wavy effects:?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>
????<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)
}

可以寫(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

SVG 濾鏡，讓使用更簡(jiǎn)單

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

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

看這樣一個(gè) DEMO，我們有這樣一個(gè)三角形：

我們想通過(guò)它得到一個(gè)圓角三角形：

借助 SVG 濾鏡，其實(shí)也可以快速達(dá)成，省去了上面還需要疊加一個(gè) 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) 可以快速引入一個(gè)定義好的 SVG 濾鏡。也可以這樣，直接嵌入到 URL 中：

div?{
????????border:?60px?solid?transparent;
????????border-left:?120px?solid?#f48;
????????filter:?url("data:Find another way! See how to use CSS filters to create rounded corners and wavy effects/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角圖形的方式，在一些特定的場(chǎng)景下，可能有著妙用。同時(shí)，在很多場(chǎng)景下，可以使用 SVG 濾鏡簡(jiǎn)化操作。

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

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

• 此方式產(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)景下，此方式還是有一定的用武之地的。

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

作者：ChokCoco

更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問(wèn)：編程視頻！！

The above is the detailed content of Find another way! See how to use CSS filters to create rounded corners and wavy effects. For more information, please follow other related articles on the PHP Chinese website!