CSS3徑向漸變r(jià)adial-gradient實(shí)現(xiàn)波浪邊框和內(nèi)倒角

王巖威發(fā)布于2019-08-30 15:55 / 1968人閱讀

摘要：表示圓形漸變，說的簡單點(diǎn)就是畫一個(gè)圓。表示容器最右邊，表示容器最上邊，換言之就是右上角。實(shí)現(xiàn)波浪邊框上代碼，增加一個(gè)樣式即可此處沒有字樣，表示原點(diǎn)在容器中心位置，，表示半徑范圍內(nèi)是顏色，半徑到范圍內(nèi)是顏色，半徑大于是顏色。

前言

大佬給了一張優(yōu)惠券圖片(如下圖)，我一看，這波浪型的邊框和內(nèi)倒角用css寫不出來吧，遂向大佬說明并要ui切圖，大佬回答：css3可以實(shí)現(xiàn)。好吧，大佬都說可以實(shí)現(xiàn)了，還不趕緊去求谷哥，度娘。

實(shí)現(xiàn)內(nèi)倒角

上代碼，然后解釋代碼

重點(diǎn)解釋radial-gradient(circle at right top, #fff, #fff 10px, transparent 11px)這個(gè)樣式是干嘛的。

circle表示圓形漸變，說的簡單點(diǎn)就是畫一個(gè)圓。畫圓就要知道原點(diǎn)。

circle at right top 中的right top就是原點(diǎn)位置。這里原點(diǎn)位置是相對(duì)于容器的坐標(biāo)。right表示容器最右邊，top表示容器最上邊，換言之就是右上角。

circle at right top 后面的#fff, #fff 10px, transparent 11px就是從原點(diǎn)開始各種顏色漸變的長度。

代碼#fff, #fff 10px, transparent 11px中第一個(gè)#fff表示原點(diǎn)處為#fff顏色，#fff 10px表示距離原點(diǎn)半徑10px這段距離都是#fff顏色，transparent 11px表示距離原點(diǎn)10px到11px都是transparent顏色，由于沒有設(shè)置其他顏色，所以距離原點(diǎn)11px以后都是transparent顏色。

總結(jié)radial-gradient(circle at right top, #fff, #fff 10px, transparent 11px),就是以容器的右上角為原點(diǎn)畫圓，半徑10px范圍內(nèi)是#fff顏色，半徑大于10px范圍內(nèi)都是transparent顏色。

這樣在右上角就形成了內(nèi)倒角

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

實(shí)現(xiàn)波浪邊框

上代碼，增加一個(gè)css樣式即可

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

(背景藍(lán)色是為了演示效果)

再加上background-size: 10px 10px;設(shè)置背景大小為寬10px高10px，這樣就能實(shí)現(xiàn)多個(gè)直徑為8px的#fff顏色的圓。

(背景藍(lán)色是為了演示效果)

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

最后附上效果圖

總結(jié)

實(shí)現(xiàn)內(nèi)倒角其實(shí)是畫一個(gè)#fff顏色的圓，圓只有四分之一在容器內(nèi)

實(shí)現(xiàn)波浪邊框其實(shí)是畫多個(gè)#fff顏色的圓，圓只有一半在容器內(nèi)

參考文獻(xiàn)：
10個(gè)demo示例學(xué)會(huì)CSS3 radial-gradient徑向漸變
CSS-論css如何純代碼實(shí)現(xiàn)內(nèi)凹圓角