做網(wǎng)站設(shè)計的時候，免不了和DIV+CSS打交道，而CSS圓角則是網(wǎng)站設(shè)計必經(jīng)的一課。飄易比較了網(wǎng)絡(luò)上眾多的CSS圓角實現(xiàn)的方案，包括不用圖片純CSS實現(xiàn)圓角的許多方案，結(jié)果是不用圖片的CSS圓角無一例外，都使用了大量的冗余無意義的css代碼，而且在IE、Firefox、chrome等多瀏覽器下的兼容性不容樂觀。    總結(jié)一下，飄易建議大家還是使用圖片做背景的CSS圓角實現(xiàn)方案。一張圖片利用CSS定位，實現(xiàn)DIV的四個邊角都是圓角。這樣的好處是，只需要一張圓形的圖片，就可以實現(xiàn)四個圓角了。  

  HTML代碼：

    CSS代碼：

.nav{position:relative;width:500px;margin:0px auto;background:#eeeeee;}

.nav2{ border:1px solid #dddddd; padding: 4px 0px 2px 0px;height:42px;text-align:center;}

 /*css圓角處理*/.nav .leftTop{/*css圓角左上角*/background:url     (images/wbb.gif) no-repeat left top;width:10px;height:10px;position:absolute;left:0;top:0;} 

 .nav .rightTop{/*css圓角右上角*/background:url(images/wbb.gif) no-repeat right top;width:10px;height:10px;position:absolute;right:0;top:0;}  

.nav .leftBottom{/*css圓角左下角*/background:url(images/wbb.gif) no-repeat left bottom;width:10px;height:10px;position:absolute;left:0;bottom:0;} 

 .nav .rightBottom{/*css圓角右下角*/background:url(images/wbb.gif) no-repeat right bottom;width:10px;height:10px;position:absolute;right:0;bottom:0;} /*css圓角處理end*/   

 你所要做的就是準(zhǔn)備一張畫有圓的wbb.gif的圖片而已。