本篇內容介紹了“css如何實現(xiàn)波浪線邊框”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

創(chuàng)新互聯(lián)專注網(wǎng)站設計,以設計驅動企業(yè)價值的持續(xù)增長,網(wǎng)站，看似簡單卻每一個企業(yè)都需要——設計，看似簡潔卻是每一位設計師的心血 十載來，我們只專注做網(wǎng)站。認真對待每一個客戶，我們不用口頭的語言來吹擂我們的優(yōu)秀，近1000家的成功案例見證著我們的成長。

css實現(xiàn)波浪線邊框的方法：首先創(chuàng)建一個HTML示例文件；然后創(chuàng)建p標簽；最后通過徑向漸變“radial-gradient”實現(xiàn)波浪邊框即可。

本文操作環(huán)境：windows7系統(tǒng)、HTML5&&CSS3版、Dell G3電腦。

css怎么實現(xiàn)波浪線邊框？

CSS3徑向漸變radial-gradient實現(xiàn)波浪邊框和內倒角的方法

前言

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

實現(xiàn)內倒角

上代碼，然后解釋代碼

<p class="radial-gradient"></p>
<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的樣式不用解釋，懂點css都知道。關鍵在于.radial-gradient:after樣式。

重點解釋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); 就不解釋了。

實現(xiàn)波浪邊框

上代碼，增加一個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范圍內都是transparent顏色。這樣就有一個直徑為8px的#fff顏色的圓位于容器(這里的容器是:after)中心。

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

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

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

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

最后附上效果圖

總結

實現(xiàn)內倒角其實是畫一個#fff顏色的圓，圓只有四分之一在容器內 實現(xiàn)波浪邊框其實是畫多個#fff顏色的圓，圓只有一半在容器內

“css如何實現(xiàn)波浪線邊框”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質量的實用文章！

網(wǎng)頁名稱：css如何實現(xiàn)波浪線邊框
當前網(wǎng)址：http://chinadenli.net/article48/iecghp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、動態(tài)網(wǎng)站、網(wǎng)站收錄、App設計、小程序開發(fā)、網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)