本節(jié)向大家介紹一下DIV+CSS圓角的簡單實(shí)現(xiàn)方法，即使用圖片做背景的DIV+CSS圓角實(shí)現(xiàn)方案。一張圖片利用CSS定位，實(shí)現(xiàn)DIV的四個(gè)邊角都是圓角。這樣的好處是，只需要一張圓形的圖片，就可以實(shí)現(xiàn)四個(gè)圓角了。

DIV+CSS圓角的簡單實(shí)現(xiàn)方法

做網(wǎng)站設(shè)計(jì)的時(shí)候，免不了和DIV+CSS打交道，而DIV+CSS圓角則是網(wǎng)站設(shè)計(jì)必經(jīng)的一課。比較了網(wǎng)絡(luò)上眾多的DIV+CSS圓角實(shí)現(xiàn)的方案，包括不用圖片純CSS實(shí)現(xiàn)圓角的許多方案，結(jié)果是不用圖片的DIV+CSS圓角無一例外，都使用了大量的冗余無意義的css代碼，而且在IE、Firefox、chrome等多瀏覽器下的兼容性不容樂觀。

總結(jié)一下，建議大家還是使用圖片做背景的DIV+CSS圓角實(shí)現(xiàn)方案。一張圖片利用CSS定位，實(shí)現(xiàn)DIV的四個(gè)邊角都是圓角。這樣的好處是，只需要一張圓形的圖片，就可以實(shí)現(xiàn)四個(gè)圓角了。

HTML代碼： 

<divclassdivclass="nav"> 
<divclassdivclass="nav2"> 
<SPANclassSPANclass=leftTop></SPAN> 
<SPANclassSPANclass=rightTop></SPAN> 
 

這里是主體內(nèi)容....

<SPANclassSPANclass=leftBottom></SPAN> 
<SPANclassSPANclass=rightBottom></SPAN> 
</div> 
</div> 

CSS代碼： 

.nav{  
position:relative;  
width:500px;  
margin:0pxauto;  
background:#eeeeee;  
}  
.nav2{  
border:1pxsolid#dddddd;  
padding:4px0px2px0px;  
height:42px;  
text-align:center;  
}  
 
/*DIV+CSS圓角處理*/  
.nav.leftTop{/*DIV+CSS圓角左上角*/  
background:url(images/wbb.gif)no-repeatlefttop;  
width:10px;  
height:10px;  
position:absolute;  
left:0;  
top:0;  
}  
.nav.rightTop{/*DIV+CSS圓角右上角*/  
background:url(images/wbb.gif)no-repeatrighttop;  
width:10px;  
height:10px;  
position:absolute;  
right:0;  
top:0;  
}  
.nav.leftBottom{/*DIV+CSS圓角左下角*/  
background:url(images/wbb.gif)no-repeatleftbottom;  
width:10px;  
height:10px;  
position:absolute;  
left:0;  
bottom:0;  
}  
.nav.rightBottom{/*DIV+CSS圓角右下角*/  
background:url(images/wbb.gif)no-repeatrightbottom;  
width:10px;  
height:10px;  
position:absolute;  
right:0;  
bottom:0;  
}  
/*DIV+CSS圓角處理end*/  

【編輯推薦】

1. DIV CSS網(wǎng)頁布局時(shí)合理架構(gòu)CSS
2. 技術(shù)分享 如何實(shí)現(xiàn)CSS橫向?qū)Ш?/a>
3. 技術(shù)分享 DIV CSS網(wǎng)站布局八大竅門
4. DIV CSS中id與class使用用原則與技巧
5. 鼠標(biāo)經(jīng)過時(shí)改變DIV背景顏色的三種途徑