css實作波浪線邊框的方法：先建立一個HTML範例檔案；然後建立p標籤；最後透過徑向漸層「radial-gradient」實作波浪邊框即可。
本文操作環境：windows7系統、HTML5&&CSS3版、Dell G3電腦。
css怎麼實作波浪線邊框？
CSS3徑向漸層radial-gradient實現波浪邊框和內倒角的方法
前言
大佬給了一張優惠券圖片(如下圖)，我一看，這波浪型的邊框和內倒角用css寫不出來吧，遂向大佬說明並要ui切圖，大佬回答：css3可以實現。好吧，大佬都說可以實現了，還不趕緊去求穀哥，度娘。
實作內倒角
上程式碼，然後解釋程式碼
<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); 就不解釋了。
實作波浪邊框
上程式碼，增加一個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，這樣就能實現多個直徑為8px的#fff顏色的圓。
(背景藍色是為了示範效果)
left: -5px; 向左偏移5px，使:after只有一半在.radial-gradient容器內
最後附上效果圖
總結
實現內倒角其實是畫一個#fff顏色的圓，圓只有四分之一在容器內實現波浪邊框其實是畫多個#fff顏色的圓，圓只有一半在容器內
【推薦學習：css視頻教程】
以上是css怎麼實作波浪線邊框的詳細內容。更多資訊請關注PHP中文網其他相關文章！
