
build網(wǎng)站制作 |
build網(wǎng)站制作當(dāng)前位置:首頁>主要服務(wù)>網(wǎng)站制作DIV+CSS圓角的簡單實現(xiàn)方法(圖)做網(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的圖片而已。 0
|
易勢沈陽建站專業(yè)機構(gòu),以DIV+CSS為主,js/jQuery為輔,制作利于優(yōu)化,頁面美觀的優(yōu)質(zhì)網(wǎng)站!

網(wǎng)絡(luò)策劃公司|新浪官方微博|大連網(wǎng)站建設(shè)
沈陽易勢科技有限公司 網(wǎng)站制作網(wǎng)絡(luò)營銷公司 © 2011 , All rights reserved. 公司地址:沈陽市鐵西區(qū)貴和街道建設(shè)中路15號淺草綠閣商務(wù)樓402室沈陽做網(wǎng)站 沈陽建站
遼B2-20150173-8