溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
如何制作CSS圓角邊框，針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。
CSS3的border-radius
利用DIV+CSS生成圓角邊框，在很多情況下都會(huì)用到，目前DIV+CSS的圓角邊框，一種是利用CSS3，一種是利用布局模擬出圓角。
先說第一種，利用CSS3，前提是您的瀏覽器必須支持CSS3，F(xiàn)irefox3是支持的，我看到的很多網(wǎng)站圓角也是利用CSS3直接生成的，無非就是ie下依然顯示直角而已，讓ie固執(zhí)去吧。
利用CSS3，你可以指定4個(gè)角都是圓角，或者某一個(gè)角是圓角非常方便，代碼如下：
CSS Code復(fù)制內(nèi)容到剪貼板
#round {
background-color: #000;
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
color:#fff;
}
#indie {
background-color: #000;
border: 1px solid #000;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
color:#fff;
}<div id="round"><h2>圓角邊框</h2></div> <div id="indie"><h2>部分圓角</h2></div>
不使用 border-radius 實(shí)現(xiàn)圓角
CSS3中，利用屬性 border-radius 可以很方便的設(shè)置出圓角矩形，但是在IE8及以下版本卻不支持這個(gè)屬性，為了在舊版本的瀏覽器中實(shí)現(xiàn)寬高自適應(yīng)的圓角矩形，可以采用以下三種方法。
1.使用背景圖片制作圓角
使用背景圖片制作寬、高自適應(yīng)的圓角矩形，首先需要切出4個(gè)圓角圖片，然后把4個(gè)圓角圖片放在矩形的四個(gè)角上就大功告成了，這一共需要5個(gè)div標(biāo)簽，1個(gè)容器div和4個(gè)圓角背景div。是不是很好理解。
具體實(shí)現(xiàn)來說，需要注意一些細(xì)節(jié)。對(duì)于矩形容器div：
上下內(nèi)邊距的大小至少設(shè)置為圓角的高度。
position設(shè)置為相對(duì)定位。
放置內(nèi)容。
對(duì)于4個(gè)圓角背景div：
分別設(shè)置各個(gè)圓角背景圖片。
絕對(duì)定位于容器矩形的四個(gè)角。
需要設(shè)置寬高值才能顯示背景圖片。
假設(shè)圓角圖片的寬高是5px，具體代碼如下：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<div class="content"> <div class="top-left"></div> <div class="top-right"></div> <div class="btm-left"></div> <div class="btm-right"></div> </div>
CSS Code復(fù)制內(nèi)容到剪貼板
.content {
position: relative;
padding: 5px;
}
.top-left,
.top-rightright,
.btm-left,
.btm-rightright {
position: absolute;
width: 5px;
height: 5px;
}
.top-left {
top: 0;
left: 0;
background: url(imgs/top-left.png) no-repeat top left;
}
.top-rightright {
top: 0;
rightright: 0;
background: url(imgs/top-rightright.png) no-repeat top left;
}
.btm-left {
bottombottom: 0;
left: 0;
background: url(imgs/btm-left.png) no-repeat top left;
}
.btm-rightright {
bottombottom: 0;
rightright: 0;
background: url(imgs/btm-rightright.png) no-repeat top left;
}2.純 CSS+div 制作圓角矩形
這種方法的原理是利用像素點(diǎn)繪制弧線來模擬圓角。簡單起見，這里我用圓角半徑為3px的例子講解，其中圓角矩形的背景色為粉色，矩形的邊框?yàn)楹谏?。左上角圓角放大后如下圖所示：
這里矩形上下各需要3個(gè)高度為1px、垂直羅在一起的div才能模擬出圓角。具體實(shí)現(xiàn)如下：
第一個(gè)div就是上面圖中矩形的黑色上邊框，因?yàn)槟M的圓角半徑為3px，所以該div的左右外邊距設(shè)為3px，背景色設(shè)為黑色。
第二個(gè)div的左右外邊距設(shè)為2px，左右邊框?yàn)?px的黑線，背景色為粉色。
第三個(gè)div的左右外邊距設(shè)為1px，左右邊框?yàn)?px的黑線，背景色為粉色。
圓角矩形下面的兩個(gè)圓角是以上三個(gè)div反序排列。
矩形內(nèi)容區(qū)域的div只需要設(shè)置左右邊框和背景色即可。
具體代碼如下
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<div class="wrapper"> <div class="r1"></div> <div class="r2"></div> <div class="r3"></div> <div class="content">aaaaa</div> <div class="r3"></div> <div class="r2"></div> <div class="r1"></div> </div>
CSS Code復(fù)制內(nèi)容到剪貼板
.r1 {
height: 1px;
margin: 0 3px;
background-color: #111;
}
.r2 {
height: 1px;
margin: 0 2px;
background-color: #f4b4b4;
border-left: 1px solid #111;
border-right: 1px solid #111;
}
.r3 {
height: 1px;
margin: 0 1px;
background-color: #f4b4b4;
border-left: 1px solid #111;
border-right: 1px solid #111;
}
.content {
background-color: #f4b4b4;
border-left: 1px solid #111;
border-right: 1px solid #111;
}此方法優(yōu)缺點(diǎn)分析：
不使用背景圖片，減少了HTTP請(qǐng)求數(shù)。
后期維護(hù)性好，但是圓角矩形像素增加，無意義的div代碼將成倍增加。
實(shí)現(xiàn)的圓角矩形有局限性。
只能實(shí)現(xiàn)純色圓角。
3.使用CSS border 畫出梯形模擬圓角
通過設(shè)置border屬性，可以得到梯形和三角形，效果如下圖所示：
當(dāng)給div的四個(gè)邊框設(shè)置比較大的寬度值時(shí)，就能得到四個(gè)梯形，如上圖中的第一個(gè)圖案；
在此基礎(chǔ)上，當(dāng)把div的高度值設(shè)為0后，就能得到梯形和等腰三角形了，如上圖中的第二個(gè)圖案；
當(dāng)把div的寬、高都設(shè)為0，且只設(shè)置上、左的兩個(gè)邊框時(shí)，就能得到兩個(gè)直角三角形，圖中的第三個(gè)圖案就是這種情況；
在此基礎(chǔ)上，把其中的一個(gè)邊框的顏色設(shè)置為透明，就能像第四個(gè)圖案一樣得到一個(gè)直角三角形。
代碼如下：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
CSS Code復(fù)制內(nèi)容到剪貼板
.box1 {
height: 20px;
width: 20px;
border-top: 20px solid red;
border-right: 20px solid green;
border-bottom: 20px solid blue;
border-left: 20px solid yellow;
}
.box2 {
height: 0;
width: 20px;
border-top: 20px solid red;
border-right: 20px solid green;
border-bottom: 20px solid blue;
border-left: 20px solid yellow;
}
.box3 {
height: 0;
width: 0;
border-top: 50px solid red;
/* border-right: 20px solid green; */
/* border-bottom: 20px solid blue; */
border-left: 50px solid yellow;
}
.box4 {
height: 0;
width: 0;
border-top: 50px solid red;
/* border-right: 20px solid green; */
/* border-bottom: 20px solid blue; */
border-left: 50px solid transparent;
}已經(jīng)知道了如何通過 border 畫出梯形了，那又該如何利用梯形模擬圓角矩形呢？很簡單，只要在矩形的上面和下面各放上一個(gè)梯形，就能得到圓角矩形了。原理嘛就是利用梯形的左右兩個(gè)斜邊模擬圓角啦，直接上效果圖：
具體代碼如下：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<div class="wrapper">
<div class="top"></div>
<div class="content">
<p>利用border畫出梯形，模擬圓角</p>
</div>
<div class="bottom"></div>
</div>
CSS Code復(fù)制內(nèi)容到剪貼板
div {
box-sizing: border-box;
}
.top {
height: 0;
border-top: 3px solid transparent;
border-bottom: 3px solid #111;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.bottombottom {
height: 0;
border-top: 3px solid #111;
border-bottom: 3px solid transparent;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.content {
color: #fff;
background-color: #111;
}
.wrapper {
width: 200px;
margin: 0 auto;
}關(guān)于如何制作CSS圓角邊框問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼