本篇內(nèi)容介紹了“怎么用Div+CSS純圖片實(shí)現(xiàn)圓角矩形”的有關(guān)知識,在實(shí)際案例的操作過程中,不少人都會(huì)遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
公司主營業(yè)務(wù):成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳,提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化,感謝他們對我們的高要求,感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn),讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出鹿城免費(fèi)做網(wǎng)站回饋大家。
對,你沒有看錯(cuò),就是“純圖片”,不是純代碼實(shí)現(xiàn)而是利用圖片來實(shí)現(xiàn)的圓角。你或許會(huì)不以為然,可是我想告訴你的是即使將來CSS3圓角實(shí)現(xiàn)全瀏覽器兼容,但在當(dāng)下圖片圓角依舊是主流,豐富的圖片效果(漸變、陰影、透明度、圓角、瀏覽器兼容、開發(fā)維護(hù)效率)這些是用代碼實(shí)現(xiàn)遠(yuǎn)遠(yuǎn)不可比擬的。所以說圖片圓角在實(shí)戰(zhàn)中的重要性是有目共睹的,掌握圖片圓角的技巧為日常開發(fā)打下堅(jiān)實(shí)的基礎(chǔ)。下面開始剖析各個(gè)圖片圓角的實(shí)現(xiàn)技巧,你會(huì)發(fā)現(xiàn)原來用圖片實(shí)現(xiàn)的圓角也會(huì)那么的豐富多彩!
大致的demo就是這樣:
1.全部浮動(dòng)法
如果一個(gè)CSS初學(xué)者寫圖片圓角效果,那么推薦使用全部浮動(dòng)法,簡單且容易上手。其原理就是左圓角左浮動(dòng),主體也左浮動(dòng),右圓角右浮動(dòng),外包div 平鋪背景圖片。很直觀的就實(shí)現(xiàn)出圖片圓角效果。缺點(diǎn)是之后會(huì)需要清除浮動(dòng),且因背景圖片全部平鋪,所以左右倆個(gè)圓角必須左右覆蓋背景上不能讓圓角留白處透明出下方的圖片。
HTML代碼如下:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
CSS代碼如下:
CSS Code復(fù)制內(nèi)容到剪貼板
.floatMethod{width:350px; height:32px; background:url('roundBox_middle.gif') left top repeat-x;}
.floatMethod .middle{float:left; line-height:32px; padding:0 0 0 10px;}
.floatMethod .left{float:left; width:6px; height:32px; background:url('roundBox_left.gif') left top no-repeat;}
.floatMethod .rightright{float:rightright; width:8px; height:32px; background:url('roundBox_right.gif') left top no-repeat;}
優(yōu)點(diǎn):簡單、方便、易上手。
缺點(diǎn):需要清除浮動(dòng)、圓角圖片留白處不能透明。
原理簡析:三個(gè)div 一起浮動(dòng),左右倆個(gè)div 放置圓角,外包div 使用背景平鋪。
2.左右浮動(dòng)法
個(gè)人認(rèn)為左右浮動(dòng)發(fā)是全部浮動(dòng)法的升級版,修復(fù)了圓角圖片留白處不能透明的缺陷。原理與全部浮動(dòng)法有些類似,但現(xiàn)在左圓角左浮動(dòng),右圓角右浮動(dòng),主體直接放后面。主體利用margin 擠壓使得倆個(gè)圓角留白處可以透明處下面的背景。
HTML代碼如下:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
CSS代碼如下:
CSS Code復(fù)制內(nèi)容到剪貼板
.newFloatMethod{width:350px; height:32px;}
.newFloatMethod .middle{line-height:32px; margin:0 8px 0 6px; padding:0 0 0 10px; background:url('images/roundBox_middle.gif') left top repeat-x;}
.newFloatMethod .left{float:left; width:6px; height:32px; background:url('images/roundBox_left.gif') left top no-repeat;}
.newFloatMethod .rightright{float:rightright; width:8px; height:32px; background:url('images/roundBox_right.gif') left top no-repeat;}
優(yōu)點(diǎn):簡單、易上手。
缺點(diǎn):需要清除浮動(dòng)。
原理簡析:左圓角左浮動(dòng),右圓角右浮動(dòng),主體直接放后面。
3.滑動(dòng)門法
滑動(dòng)門法是一種比較巧妙的方法,使用一個(gè)內(nèi)嵌標(biāo)簽,外部標(biāo)簽為左圓角,內(nèi)嵌的標(biāo)簽包含了背景與右圓角。要求切圖要按照特定的方式切出,切圖的圖片同浮動(dòng)法不同。缺點(diǎn)就是對CSS掌握要求比較高,切圖也有特定的要求,且要注意寬度,盡量的讓圖片足夠的長,防止寬度不夠圖片掉出情況發(fā)生。
HTML代碼如下:
CSS Code復(fù)制內(nèi)容到剪貼板
CSS代碼如下:
CSS Code復(fù)制內(nèi)容到剪貼板
.slidingDoorMethod{width:350px; height:32px; background:url('images/roundBox_left.gif') left top no-repeat;}
.slidingDoorMethod .inner{line-height:32px; margin:0 0 0 6px; padding:0 0 0 10px; background:url('images/roundBox_slidingDoor_right.gif') rightright top no-repeat;}
優(yōu)點(diǎn):代碼精簡、自由度大。
缺點(diǎn):CSS要求較高、滑動(dòng)門切圖要求多。
原理簡析:使用一個(gè)內(nèi)嵌標(biāo)簽,外部標(biāo)簽為左圓角,內(nèi)嵌的標(biāo)簽包含了背景與右圓角。
4.負(fù)Margin法
負(fù)Margin 法是我比較喜歡的一種方法,簡單合理,開發(fā)效率高。主要利用負(fù)Margin 技術(shù)讓倆個(gè)div 重疊,“擠”出倆個(gè)圓角,實(shí)現(xiàn)出圖片圓角效果。
HTML代碼如下:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
CSS代碼如下:
CSS Code復(fù)制內(nèi)容到剪貼板
.negativeMarginMethod{width:350px; height:32px;}
.negativeMarginMethod .topLeft{height:5px; _overflow:hidden; background:url('images/roundBox_negativeMargin.gif') left top no-repeat;}
.negativeMarginMethod .topRight{height:5px; _overflow:hidden; margin:-5px 0 0 5px; background:url('images/roundBox_negativeMargin.gif') rightright top no-repeat;}
.negativeMarginMethod .title{line-height:28px; padding:0 0 0 15px; background:url('images/roundBox_middle.gif') left top repeat-x;}
優(yōu)點(diǎn):簡單直接,開發(fā)效率高。
缺點(diǎn):需理解負(fù)Margin 用法,特定的切圖方式。
原理簡析:主要利用負(fù)Margin 技術(shù)讓倆個(gè)div 重疊,“擠”出倆個(gè)圓角,實(shí)現(xiàn)出圖片圓角效果。
5.負(fù)左Margin法
這個(gè)負(fù)左Margin法是我自己瞎琢磨出來的,代碼有點(diǎn)風(fēng)騷,這里純粹當(dāng)做一個(gè)新的思路放上來,對IE6似乎有點(diǎn)小缺陷,但只要知道固定寬度也能夠兼容。主要原理就是三個(gè)div 一起浮動(dòng),主體放前面,倆個(gè)圓角利用負(fù)左margin 讓他覆蓋到相應(yīng)的位置。
HTML代碼如下:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
CSS代碼如下:
CSS Code復(fù)制內(nèi)容到剪貼板
.negativeMarginLeftMethod{width:350px; height:32px;}
.negativeMarginLeftMethod .left{float:left; width:6px; height:32px; margin:0 0 0 -100%; _margin:0 0 0 -350px; background:url('images/roundBox_left.gif') left top no-repeat;}
.negativeMarginLeftMethod .rightright{float:left; width:8px; height:32px; margin:0 0 0 -8px; background:url('images/roundBox_right.gif') left top no-repeat;}
.negativeMarginLeftMethod .inner{float:left; width:100%; line-height:32px; }
.negativeMarginLeftMethod .title{margin:0 8px 0 6px; padding:0 0 0 10px; background:url('images/roundBox_middle.gif') left top repeat-x;}
優(yōu)點(diǎn):代碼足夠風(fēng)騷。
缺點(diǎn):代碼略臃腫、CSS要求較高、IE6需要知道具體寬度。
原理簡析:主要利用負(fù)Margin 技術(shù)讓倆個(gè)div 重疊,“擠”出倆個(gè)圓角,實(shí)現(xiàn)出圖片圓角效果。
“怎么用Div+CSS純圖片實(shí)現(xiàn)圓角矩形”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!