您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“DIV+CSS圓角效果的實現(xiàn)方法”的有關(guān)知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠?qū)W有所成!
DIV+CSS圓角的簡單實現(xiàn)方法
做網(wǎng)站設(shè)計的時候,免不了和DIV+CSS打交道,而DIV+CSS圓角則是網(wǎng)站設(shè)計必經(jīng)的一課。比較了網(wǎng)絡上眾多的DIV+CSS圓角實現(xiàn)的方案,包括不用圖片純CSS實現(xiàn)圓角的許多方案,結(jié)果是不用圖片的DIV+CSS圓角無一例外,都使用了大量的冗余無意義的css代碼,而且在IE、Firefox、chrome等多瀏覽器下的兼容性不容樂觀。
總結(jié)一下,建議大家還是使用圖片做背景的DIV+CSS圓角實現(xiàn)方案。一張圖片利用CSS定位,實現(xiàn)DIV的四個邊角都是圓角。這樣的好處是,只需要一張圓形的圖片,就可以實現(xiàn)四個圓角了。
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*/
“DIV+CSS圓角效果的實現(xiàn)方法”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。