CSS3徑向漸變radial-gradient實現波浪邊框和內倒角

前言

大佬給了一張優惠券圖片(以下圖)，我一看，這波浪型的邊框和內倒角用css寫不出來吧，遂向大佬說明並要ui切圖，大佬回答：css3能夠實現。好吧，大佬都說能夠實現了，還不趕忙去求谷哥，度娘。

實現內倒角

上代碼，而後解釋代碼

<div class="radial-gradient"></div>
<style>
.radial-gradient {
    width: 200px;
    height: 100px;
    position: relative;
    background-image: radial-gradient(circle at right top, #fff, #fff 10px, transparent 11px),
           radial-gradient(circle at right bottom, #fff, #fff 10px, transparent 11px);
    background-color: red;
}
</style>

重點解釋radial-gradient(circle at right top, #fff, #fff 10px, transparent 11px)這個樣式是幹嗎的。

circle表示圓形漸變，說的簡單點就是畫一個圓。畫圓就要知道原點。

circle at right top 中的right top就是原點位置。這裏原點位置是相對於容器的座標。right表示容器最右邊，top表示容器最上邊，換言之就是右上角。

circle at right top 後面的#fff, #fff 10px, transparent 11px就是從原點開始各類顏色漸變的長度。

代碼#fff, #fff 10px, transparent 11px中第一個#fff表示原點處爲#fff顏色，#fff 10px表示距離原點半徑10px這段距離都是#fff顏色，transparent 11px表示距離原點10px到11px都是transparent顏色，因爲沒有設置其餘顏色，因此距離原點11px之後都是transparent顏色。

總結radial-gradient(circle at right top, #fff, #fff 10px, transparent 11px),就是以容器的右上角爲原點畫圓，半徑10px範圍內是#fff顏色，半徑大於10px範圍內都是transparent顏色。

這樣在右上角就造成了內倒角

同理 radial-gradient(circle at right bottom, #fff, #fff 10px, transparent 11px); 就不解釋了。

實現波浪邊框

上代碼，增長一個css樣式便可

<style>
.radial-gradient:after {
    content: '';
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: -5px;
    width: 10px;
    height: 100%;
    background: radial-gradient(circle, #fff, #fff 4px, transparent 5px);
    background-size: 10px 10px;
}
</style>

background: radial-gradient(circle, #fff, #fff 4px, transparent 5px); 此處沒有 at right top字樣，表示原點在容器中心位置，#fff, #fff 4px, transparent 5px，表示半徑4px範圍內是#fff顏色，半徑4px到5px範圍內是transparent顏色，半徑大於5px是transparent顏色。這樣就有一個直徑爲8px的#fff顏色的圓位於容器(這裏的容器是:after)中心。

(背景藍色是爲了演示效果)

再加上background-size: 10px 10px;設置背景大小爲寬10px高10px，這樣就能實現多個直徑爲8px的#fff顏色的圓。

(背景藍色是爲了演示效果)

left: -5px; 向左偏移 5px，使:after只有一半在.radial-gradient容器內

最後附上效果圖

總結

實現內倒角實際上是畫一個#fff顏色的圓，圓只有四分之一在容器內

實現波浪邊框實際上是畫多個#fff顏色的圓，圓只有一半在容器內

參考文獻：
10個demo示例學會CSS3 radial-gradient徑向漸變
CSS-論css如何純代碼實現內凹圓角