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

  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)備一張畫(huà)有圓的wbb.gif的圖片而已。