怎么用Div+CSS純圖片實(shí)現(xiàn)圓角矩形

本篇內(nèi)容介紹了“怎么用Div+CSS純圖片實(shí)現(xiàn)圓角矩形”的有關(guān)知識(shí)，在實(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è)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出鹿城免費(fèi)做網(wǎng)站回饋大家。

對(duì)，你沒有看錯(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)中的重要性是有目共睹的，掌握?qǐng)D片圓角的技巧為日常開發(fā)打下堅(jiān)實(shí)的基礎(chǔ)。下面開始剖析各個(gè)圖片圓角的實(shí)現(xiàn)技巧，你會(huì)發(fā)現(xiàn)原來用圖片實(shí)現(xiàn)的圓角也會(huì)那么的豐富多彩！

大致的demo就是這樣：

怎么用Div+CSS純圖片實(shí)現(xiàn)圓角矩形
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)容到剪貼板

  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:350px; height:32px; background:url('roundBox_middle.gif') left top repeat-x;}   

  2. .floatMethod .middle{float:left; line-height:32px; padding:0 0 0 10px;}   

  3. .floatMethod .left{float:left; width:6px; height:32px; background:url('roundBox_left.gif') left top no-repeat;}   

  4. .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)法的升級(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:350px; height:32px;}   

  2. .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;}   

  3. .newFloatMethod .left{float:left; width:6px; height:32px; background:url('images/roundBox_left.gif') left top no-repeat;}   

  4. .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)就是對(duì)CSS掌握要求比較高，切圖也有特定的要求，且要注意寬度，盡量的讓圖片足夠的長，防止寬度不夠圖片掉出情況發(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:350px; height:32px; background:url('images/roundBox_left.gif') left top no-repeat;}   

  2. .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)容到剪貼板

  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:350px; height:32px;}   

  2. .negativeMarginMethod .topLeft{height:5px; _overflow:hidden; background:url('images/roundBox_negativeMargin.gif') left top no-repeat;}   

  3. .negativeMarginMethod .topRight{height:5px; _overflow:hidden; margin:-5px 0 0 5px; background:url('images/roundBox_negativeMargin.gif') rightright top no-repeat;}   

  4. .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è)新的思路放上來，對(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:350px; height:32px;}   

  2. .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;}   

  3. .negativeMarginLeftMethod .rightright{float:left; width:8px; height:32px; margin:0 0 0 -8px; background:url('images/roundBox_right.gif') left top no-repeat;}   

  4. .negativeMarginLeftMethod .inner{float:left; width:100%; line-height:32px; }   

  5. .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)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

網(wǎng)站欄目：怎么用Div+CSS純圖片實(shí)現(xiàn)圓角矩形
文章轉(zhuǎn)載：http://bm7419.com/article48/jjcgep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、、動(dòng)態(tài)網(wǎng)站、定制網(wǎng)站、網(wǎng)站內(nèi)鏈、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都app開發(fā)公司