div+css實(shí)現(xiàn)圓角邊框,在網(wǎng)絡(luò)上查看了一下,很多都是實(shí)現(xiàn)圓角的矩形的方法,我在這里介紹的是實(shí)現(xiàn)圓角矩形邊框的方法。
用代碼說(shuō)明問題:
<html>
<head>
<style>
#a{
border-left:1px #333 solid;
border-right:1px #333 solid;
width:300px;
height:500px;
}
.b{
height:1px;
overflow:hidden;
border-left:1px #333 solid;
border-right:1px #333 solid;
}
</style>
</head>
<body>
<div>
<div class="b" style="margin-left:3px;width:294px;background:#333"></div>
<div class="b" style="margin-left:2px;width:296px;"></div>
<div class="b" style="margin-left:1px;width:298px"></div>
<div id="a">
以我的能力,純DIV+CSS實(shí)現(xiàn)的效果只能做到這樣了。這里是放置內(nèi)容的地方,自己看一看代碼的規(guī)律,很容易明白。
代碼很簡(jiǎn)單,a層為放置內(nèi)容的層,其width值為300,然后向外以2像素的寬度遞減。最外一層要加上background為個(gè)屬性,目的是要將上、下兩線條呈現(xiàn)出來(lái)。
這里實(shí)現(xiàn)了3像素的圓角邊框,b層的數(shù)量決定了要實(shí)現(xiàn)多少個(gè)像素邊框。建議不要多于3層,最好是2層,即2像素圓角邊框,或者1層,因?yàn)閷訑?shù)越多,圓角的表現(xiàn)就越不圓滑。在firefox IE6 都通過測(cè)試。
</div>
<div class="b" style="margin-left:1px;width:298px"></div>
<div class="b" style="margin-left:2px;width:296px;"></div>
<div class="b" style="margin-left:3px;width:294px;background:#333"></div>
</div>
</body>
</html>
本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司!
當(dāng)前標(biāo)題:div+css實(shí)現(xiàn)圓角邊框
網(wǎng)站路徑:http://m.newbst.com/news13/323713.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供ChatGPT、面包屑導(dǎo)航、網(wǎng)站排名、商城網(wǎng)站、企業(yè)網(wǎng)站制作、電子商務(wù)
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源:
創(chuàng)新互聯(lián)