建站
咨詢
售后
建站咨詢
新聞中心
小編給大家分享一下波浪的邊框css的實(shí)現(xiàn)方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
專注于為中小企業(yè)提供成都網(wǎng)站制作、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)沂源免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上1000家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
css實(shí)現(xiàn)波浪邊框的方法：首先新建一個(gè)div，并給它一個(gè)類名；然后設(shè)置一個(gè)背景顏色，并將div設(shè)為白色；接著使用偽元素before進(jìn)行設(shè)置，并插入有漸變顏色的形狀；最后加上尺寸進(jìn)行圖形的分割，并增加三角形實(shí)現(xiàn)波浪效果即可。
波浪的邊框css的實(shí)現(xiàn)
1、新建一個(gè)div，并給它一個(gè)類名
2、設(shè)置一個(gè)背景顏色，并將div設(shè)為白色
body {
margin: 0;
padding: 0;
background: lightblue;
}
.zigzag {
position: absolute;
top: 50%;
width: 100%;
height: 50%;
background: #fff;
}3、這里使用偽元素before進(jìn)行設(shè)置，插入有漸變顏色的形狀。
.zigzag:before
{
content: '';
position: absolute;
width: 100%;
height: 20px;
display: block;
background: linear-gradient(
-45deg, transparent 33.33%,
lightblue 33.33%, lightblue 66.66%,
transparent 66.66%
);
}
4、加上尺寸進(jìn)行圖形的分割。
background-size: 30px 60px;
5、增加正45度角的三角形。
linear-gradient( 45deg, transparent 33.33%, lightblue 33.33%, lightblue 66.66%, transparent 66.66% );
6、對(duì)三角形進(jìn)行旋轉(zhuǎn)，這個(gè)時(shí)候就有波浪顯現(xiàn)了。
transform: rotateX(180deg)
以上是“波浪的邊框css的實(shí)現(xiàn)方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
文章名稱：波浪的邊框css的實(shí)現(xiàn)方法
網(wǎng)站URL：http://www.ef60e0e.cn/article/gohpej.html
