使用Div+CSS純圖片實現(xiàn)圓角矩形的方法小結(jié)

對,你沒有看錯,就是“純圖片”,不是純代碼實現(xiàn)而是利用圖片來實現(xiàn)的圓角。你或許會不以為然,可是我想告訴你的是即使將來CSS3圓角實現(xiàn)全瀏覽器兼容,但在當(dāng)下圖片圓角依舊是主流,豐富的圖片效果(漸變、陰影、透明度、圓角、瀏覽器兼容、開發(fā)維護(hù)效率)這些是用代碼實現(xiàn)遠(yuǎn)遠(yuǎn)不可比擬的。所以說圖片圓角在實戰(zhàn)中的重要性是有目共睹的,掌握圖片圓角的技巧為日常開發(fā)打下堅實的基礎(chǔ)。下面開始剖析各個圖片圓角的實現(xiàn)技巧,你會發(fā)現(xiàn)原來用圖片實現(xiàn)的圓角也會那么的豐富多彩!
大致的demo就是這樣:
1.全部浮動法
如果一個CSS初學(xué)者寫圖片圓角效果,那么推薦使用全部浮動法,簡單且容易上手。其原理就是左圓角左浮動,主體也左浮動,右圓角右浮動,外包div 平鋪背景圖片。很直觀的就實現(xiàn)出圖片圓角效果。缺點(diǎn)是之后會需要清除浮動,且因背景圖片全部平鋪,所以左右倆個圓角必須左右覆蓋背景上不能讓圓角留白處透明出下方的圖片。
HTML代碼如下:
- <div class="floatMethod">
- <div class="left"></div>
- <div class="middle">全部浮動法</div>
- <div class="right"></div>
- </div>
CSS代碼如下:
- .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):需要清除浮動、圓角圖片留白處不能透明。
原理簡析:三個div 一起浮動,左右倆個div 放置圓角,外包div 使用背景平鋪。
2.左右浮動法
個人認(rèn)為左右浮動發(fā)是全部浮動法的升級版,修復(fù)了圓角圖片留白處不能透明的缺陷。原理與全部浮動法有些類似,但現(xiàn)在左圓角左浮動,右圓角右浮動,主體直接放后面。主體利用margin 擠壓使得倆個圓角留白處可以透明處下面的背景。
HTML代碼如下:
- <div class="newFloatMethod">
- <div class="left"></div>
- <div class="right"></div>
- <div class="middle">左右浮動法</div>
- </div>
CSS代碼如下:
- .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):需要清除浮動。
原理簡析:左圓角左浮動,右圓角右浮動,主體直接放后面。
3.滑動門法
滑動門法是一種比較巧妙的方法,使用一個內(nèi)嵌標(biāo)簽,外部標(biāo)簽為左圓角,內(nèi)嵌的標(biāo)簽包含了背景與右圓角。要求切圖要按照特定的方式切出,切圖的圖片同浮動法不同。缺點(diǎn)就是對CSS掌握要求比較高,切圖也有特定的要求,且要注意寬度,盡量的讓圖片足夠的長,防止寬度不夠圖片掉出情況發(fā)生。
HTML代碼如下:
- <div class="slidingDoorMethod">
- <div class="inner">滑動門法</div>
- </div>
CSS代碼如下:
- .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要求較高、滑動門切圖要求多。
原理簡析:使用一個內(nèi)嵌標(biāo)簽,外部標(biāo)簽為左圓角,內(nèi)嵌的標(biāo)簽包含了背景與右圓角。
4.負(fù)Margin法
負(fù)Margin 法是我比較喜歡的一種方法,簡單合理,開發(fā)效率高。主要利用負(fù)Margin 技術(shù)讓倆個div 重疊,“擠”出倆個圓角,實現(xiàn)出圖片圓角效果。
HTML代碼如下:
- <div class="negativeMarginMethod">
- <div class="topLeft"></div>
- <div class="topRight"></div>
- <div class="title">負(fù)Margin法</div>
- </div>
CSS代碼如下:
- .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ù)讓倆個div 重疊,“擠”出倆個圓角,實現(xiàn)出圖片圓角效果。
5.負(fù)左Margin法
這個負(fù)左Margin法是我自己瞎琢磨出來的,代碼有點(diǎn)風(fēng)騷,這里純粹當(dāng)做一個新的思路放上來,對IE6似乎有點(diǎn)小缺陷,但只要知道固定寬度也能夠兼容。主要原理就是三個div 一起浮動,主體放前面,倆個圓角利用負(fù)左margin 讓他覆蓋到相應(yīng)的位置。
HTML代碼如下:
- <div class="negativeMarginLeftMethod">
- <div class="inner">
- <div class="title">負(fù)左Margin法</div>
- </div>
- <div class="left"></div>
- <div class="right"></div>
- </div>
CSS代碼如下:
- .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ù)讓倆個div 重疊,“擠”出倆個圓角,實現(xiàn)出圖片圓角效果。
上面五種圖片圓角實現(xiàn)方式,除了最后一種略微不適合實際中運(yùn)用外,前面四種都可以很好的兼容各個瀏覽器且兼顧了一定的開發(fā)效率。個人比較推崇滑動門法和負(fù)Margin 法這倆種方法。當(dāng)然沒有最好的方法只有最適合的自己方法,根據(jù)自己的需要來選擇一種適合自己的方法才是最棒的方法,希望本文能夠給你帶來些許的幫助與啟發(fā)。
相關(guān)文章
- 這篇文章主要介紹了css三種實現(xiàn)div在瀏覽器水平居中的方法,感興趣的小伙伴們可以參考一下2016-04-14
- 下面小編就為大家?guī)硪黄粋€div在瀏覽器水平居中的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。2016-04-14
- 這篇文章主要介紹了div+CSS制作類似微信對話氣泡效果的實例總結(jié),文中總結(jié)出了四種編寫方式,并且對三角形的繪制有一個補(bǔ)充說明,需要的朋友可以參考下2016-04-01
EXCEL表格中的#DIV/0!等符號怎么全部當(dāng)計算?
EXCEL表格中的#DIV/0!等符號怎么全部當(dāng)計算呢?excel表格中出現(xiàn)了很多符號,比如顯示#DIV/0!#N/,在計算的時候會造成很多困擾,該怎么辦呢?今天我們就來將#DIV/0!等符2016-03-27- 下面小編就為大家?guī)硪黄孌IV水平垂直居中的兩種完美方法推薦。一起跟隨小編過來看看吧。希望給大家一個參考2016-03-15
學(xué)習(xí)DIV+CSS網(wǎng)頁布局之混合布局
學(xué)習(xí)DIV+CSS網(wǎng)頁布局中的混合布局,本文為大家分享的是DIV+CSS網(wǎng)頁布局教程的第四篇,感興趣的小伙伴們可以參考一下2016-03-15學(xué)習(xí)DIV+CSS網(wǎng)頁布局之三列布局
學(xué)習(xí)DIV+CSS網(wǎng)頁布局中的三列布局,本文為大家分享的是DIV+CSS網(wǎng)頁布局教程的第三篇,感興趣的小伙伴們可以參考一下2016-03-15學(xué)習(xí)DIV+CSS網(wǎng)頁布局之兩列布局
學(xué)習(xí)DIV+CSS網(wǎng)頁布局中的兩列布局,本文為大家分享的是DIV+CSS網(wǎng)頁布局教程的第二篇,感興趣的小伙伴們可以參考一下2016-03-15學(xué)習(xí)DIV+CSS網(wǎng)頁布局之一列布局
學(xué)習(xí)DIV+CSS網(wǎng)頁布局中的一列布局,本文為大家分享的是DIV+CSS網(wǎng)頁布局教程的第一篇,感興趣的小伙伴們可以參考一下2016-03-15- 這篇文章主要介紹了使用div+CSS將頁腳始終控制在頁面最下方的方法,文中介紹了設(shè)置container以及使用絕對定位兩種方法來解決,需要的朋友可以參考下2016-03-11