DIV+CSS圓角效果輕松實現

作者：admin 2010-09-14 12:58:41

做網站設計的時候，免不了和DIV+CSS打交道，而DIV+CSS圓角則是網站設計必經的一課，比較了網絡上眾多的DIV+CSS圓角實現的方案都不容樂觀，這里向大家描述一種簡潔實用的方法，

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

DIV+CSS圓角的簡單實現方法

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

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

HTML代碼：

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

這里是主體內容....

<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*/

【編輯推薦】

DIV CSS網頁布局時合理架構CSS
技術分享如何實現CSS橫向導航
技術分享 DIV CSS網站布局八大竅門
DIV CSS中id與class使用用原則與技巧
鼠標經過時改變DIV背景顏色的三種途徑

責任編輯：佚名來源： piaoyi.org

DIV+CSS圓角