欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

HiCSS   發(fā)布時(shí)間:2016-02-22 11:25:24   作者:海玉   我要評(píng)論
這篇文章主要介紹了使用Div+CSS純圖片實(shí)現(xiàn)圓角矩形的方法小結(jié),CSS3中用代碼繪制圓角矩形非常方便,而本文要介紹的則是利用圖片來(lái)實(shí)現(xiàn)兼容性更強(qiáng)的方法,需要的朋友可以參考下

對(duì),你沒(méi)有看錯(cuò),就是“純圖片”,不是純代碼實(shí)現(xiàn)而是利用圖片來(lái)實(shí)現(xiàn)的圓角。你或許會(huì)不以為然,可是我想告訴你的是即使將來(lái)CSS3圓角實(shí)現(xiàn)全瀏覽器兼容,但在當(dāng)下圖片圓角依舊是主流,豐富的圖片效果(漸變、陰影、透明度、圓角、瀏覽器兼容、開(kāi)發(fā)維護(hù)效率)這些是用代碼實(shí)現(xiàn)遠(yuǎn)遠(yuǎn)不可比擬的。所以說(shuō)圖片圓角在實(shí)戰(zhàn)中的重要性是有目共睹的,掌握?qǐng)D片圓角的技巧為日常開(kāi)發(fā)打下堅(jiān)實(shí)的基礎(chǔ)。下面開(kāi)始剖析各個(gè)圖片圓角的實(shí)現(xiàn)技巧,你會(huì)發(fā)現(xiàn)原來(lái)用圖片實(shí)現(xiàn)的圓角也會(huì)那么的豐富多彩!

大致的demo就是這樣:

2016222111500723.png (381×364)
1.全部浮動(dòng)法
如果一個(gè)CSS初學(xué)者寫圖片圓角效果,那么推薦使用全部浮動(dòng)法,簡(jiǎn)單且容易上手。其原理就是左圓角左浮動(dòng),主體也左浮動(dòng),右圓角右浮動(dòng),外包div 平鋪背景圖片。很直觀的就實(shí)現(xiàn)出圖片圓角效果。缺點(diǎn)是之后會(huì)需要清除浮動(dòng),且因背景圖片全部平鋪,所以左右倆個(gè)圓角必須左右覆蓋背景上不能讓圓角留白處透明出下方的圖片。
HTML代碼如下:

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="floatMethod">  
  2.   <div class="left"></div>  
  3.   <div class="middle">全部浮動(dòng)法</div>  
  4.   <div class="right"></div>  
  5. </div>  

CSS代碼如下:

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .floatMethod{width:350pxheight:32pxbackground:url('roundBox_middle.gif'left top repeat-x;}   
  2. .floatMethod .middle{float:leftline-height:32pxpadding:0 0 0 10px;}   
  3. .floatMethod .left{float:leftwidth:6pxheight:32pxbackground:url('roundBox_left.gif'left top no-repeat;}   
  4. .floatMethod .rightright{float:rightrightwidth:8pxheight:32pxbackground:url('roundBox_right.gif'left top no-repeat;}  

優(yōu)點(diǎn):簡(jiǎn)單、方便、易上手。
缺點(diǎn):需要清除浮動(dòng)、圓角圖片留白處不能透明。
原理簡(jiǎn)析:三個(gè)div 一起浮動(dòng),左右倆個(gè)div 放置圓角,外包div 使用背景平鋪。

2.左右浮動(dòng)法
個(gè)人認(rèn)為左右浮動(dòng)發(fā)是全部浮動(dòng)法的升級(jí)版,修復(fù)了圓角圖片留白處不能透明的缺陷。原理與全部浮動(dòng)法有些類似,但現(xiàn)在左圓角左浮動(dòng),右圓角右浮動(dòng),主體直接放后面。主體利用margin 擠壓使得倆個(gè)圓角留白處可以透明處下面的背景。
HTML代碼如下:

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="newFloatMethod">  
  2.   <div class="left"></div>  
  3.   <div class="right"></div>  
  4.   <div class="middle">左右浮動(dòng)法</div>  
  5. </div>  

CSS代碼如下:

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .newFloatMethod{width:350pxheight:32px;}   
  2. .newFloatMethod .middle{line-height:32pxmargin:0 8px 0 6pxpadding:0 0 0 10pxbackground:url('images/roundBox_middle.gif'left top repeat-x;}   
  3. .newFloatMethod .left{float:leftwidth:6pxheight:32pxbackground:url('images/roundBox_left.gif'left top no-repeat;}   
  4. .newFloatMethod .rightright{float:rightrightwidth:8pxheight:32pxbackground:url('images/roundBox_right.gif'left top no-repeat;}  

優(yōu)點(diǎn):簡(jiǎn)單、易上手。
缺點(diǎn):需要清除浮動(dòng)。
原理簡(jiǎn)析:左圓角左浮動(dòng),右圓角右浮動(dòng),主體直接放后面。

3.滑動(dòng)門法
滑動(dòng)門法是一種比較巧妙的方法,使用一個(gè)內(nèi)嵌標(biāo)簽,外部標(biāo)簽為左圓角,內(nèi)嵌的標(biāo)簽包含了背景與右圓角。要求切圖要按照特定的方式切出,切圖的圖片同浮動(dòng)法不同。缺點(diǎn)就是對(duì)CSS掌握要求比較高,切圖也有特定的要求,且要注意寬度,盡量的讓圖片足夠的長(zhǎng),防止寬度不夠圖片掉出情況發(fā)生。
HTML代碼如下:

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <div class="slidingDoorMethod">   
  2.   <div class="inner">滑動(dòng)門法</div>   
  3. </div>  

CSS代碼如下:

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .slidingDoorMethod{width:350pxheight:32pxbackground:url('images/roundBox_left.gif'left top no-repeat;}   
  2. .slidingDoorMethod .inner{line-height:32pxmargin:0 0 0 6pxpadding:0 0 0 10pxbackground:url('images/roundBox_slidingDoor_right.gif'rightright top no-repeat;}  

優(yōu)點(diǎn):代碼精簡(jiǎn)、自由度大。
缺點(diǎn):CSS要求較高、滑動(dòng)門切圖要求多。
原理簡(jiǎn)析:使用一個(gè)內(nèi)嵌標(biāo)簽,外部標(biāo)簽為左圓角,內(nèi)嵌的標(biāo)簽包含了背景與右圓角。

4.負(fù)Margin法
負(fù)Margin 法是我比較喜歡的一種方法,簡(jiǎn)單合理,開(kāi)發(fā)效率高。主要利用負(fù)Margin 技術(shù)讓倆個(gè)div 重疊,“擠”出倆個(gè)圓角,實(shí)現(xiàn)出圖片圓角效果。
HTML代碼如下:

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="negativeMarginMethod">  
  2.   <div class="topLeft"></div>  
  3.   <div class="topRight"></div>  
  4.   <div class="title">負(fù)Margin法</div>  
  5. </div>  

CSS代碼如下:

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .negativeMarginMethod{width:350pxheight:32px;}   
  2. .negativeMarginMethod .topLeft{height:5px; _overflow:hiddenbackground:url('images/roundBox_negativeMargin.gif'left top no-repeat;}   
  3. .negativeMarginMethod .topRight{height:5px; _overflow:hiddenmargin:-5px 0 0 5pxbackground:url('images/roundBox_negativeMargin.gif'rightright top no-repeat;}   
  4. .negativeMarginMethod .title{line-height:28pxpadding:0 0 0 15pxbackground:url('images/roundBox_middle.gif'left top repeat-x;}  

優(yōu)點(diǎn):簡(jiǎn)單直接,開(kāi)發(fā)效率高。
缺點(diǎn):需理解負(fù)Margin 用法,特定的切圖方式。
原理簡(jiǎn)析:主要利用負(fù)Margin 技術(shù)讓倆個(gè)div 重疊,“擠”出倆個(gè)圓角,實(shí)現(xiàn)出圖片圓角效果。

5.負(fù)左Margin法
這個(gè)負(fù)左Margin法是我自己瞎琢磨出來(lái)的,代碼有點(diǎn)風(fēng)騷,這里純粹當(dāng)做一個(gè)新的思路放上來(lái),對(duì)IE6似乎有點(diǎn)小缺陷,但只要知道固定寬度也能夠兼容。主要原理就是三個(gè)div 一起浮動(dòng),主體放前面,倆個(gè)圓角利用負(fù)左margin 讓他覆蓋到相應(yīng)的位置。
HTML代碼如下:

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="negativeMarginLeftMethod">  
  2.   <div class="inner">  
  3.     <div class="title">負(fù)左Margin法</div>  
  4.   </div>  
  5.   <div class="left"></div>  
  6.   <div class="right"></div>  
  7. </div>  

CSS代碼如下:

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .negativeMarginLeftMethod{width:350pxheight:32px;}   
  2. .negativeMarginLeftMethod .left{float:leftwidth:6pxheight:32pxmargin:0 0 0 -100%; _margin:0 0 0 -350px;  background:url('images/roundBox_left.gif'left top no-repeat;}   
  3. .negativeMarginLeftMethod .rightright{float:leftwidth:8pxheight:32pxmargin:0 0 0 -8pxbackground:url('images/roundBox_right.gif'left top no-repeat;}   
  4. .negativeMarginLeftMethod .inner{float:leftwidth:100%; line-height:32px; }   
  5. .negativeMarginLeftMethod .title{margin:0 8px 0 6pxpadding:0 0 0 10pxbackground:url('images/roundBox_middle.gif'left top repeat-x;}  

優(yōu)點(diǎn):代碼足夠風(fēng)騷。
缺點(diǎn):代碼略臃腫、CSS要求較高、IE6需要知道具體寬度。
原理簡(jiǎn)析:主要利用負(fù)Margin 技術(shù)讓倆個(gè)div 重疊,“擠”出倆個(gè)圓角,實(shí)現(xiàn)出圖片圓角效果。


上面五種圖片圓角實(shí)現(xiàn)方式,除了最后一種略微不適合實(shí)際中運(yùn)用外,前面四種都可以很好的兼容各個(gè)瀏覽器且兼顧了一定的開(kāi)發(fā)效率。個(gè)人比較推崇滑動(dòng)門法和負(fù)Margin 法這倆種方法。當(dāng)然沒(méi)有最好的方法只有最適合的自己方法,根據(jù)自己的需要來(lái)選擇一種適合自己的方法才是最棒的方法,希望本文能夠給你帶來(lái)些許的幫助與啟發(fā)。

相關(guān)文章

最新評(píng)論