CSS純圖片圓角Box的實現技巧

CSS實例教程——純圖片圓角Box的實現技巧

BY：htttp://www.iiwnet.com

終於要開始寫實戰系列了，本站的口號但是理論爲輔，實戰爲主哦。對，你沒有看錯，就是「純圖片」，不是純代碼實現而是利用圖片來實現的圓角。你或許會不覺得然，但是我想告訴你的是即便未來CSS3圓角實現全瀏覽器兼容，但在當下圖片圓角依舊是主流，豐富的圖片效果（漸變、陰影、透明度、圓角、瀏覽器兼容、開發維護效率）這些是用代碼實現遠遠不可比擬的。因此說圖片圓角在實戰中的重要性是有目共睹的，掌握圖片圓角的技巧爲平常開發打下堅實的基礎。下面開始剖析各個圖片圓角的實現技巧，你會發現原來用圖片實現的圓角也會那麼的豐富多彩！

所有浮動法

若是一個CSS初學者寫圖片圓角效果，那麼推薦使用所有浮動法，簡單且容易上手。其原理就是左圓角左浮動，主體也左浮動，右圓角右浮動，外包div 平鋪背景圖片。很直觀的就實現出圖片圓角效果。缺點是以後會須要清除浮動，且因背景圖片所有平鋪，因此左右倆個圓角必須左右覆蓋背景上不能讓圓角留白處透明出下方的圖片。

HTML代碼以下：

<div class="floatMethod">

<div class="left"></div>

<div class="middle">所有浮動法</div>

<div class="right"></div>

</div>

.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 .right{float:right; width:8px; height:32px; background:url('roundBox_right.gif') left top

優勢：簡單、方便、易上手。
缺點：須要清除浮動、圓角圖片留白處不能透明。
原理簡析：三個div 一塊兒浮動，左右倆個div 放置圓角，外包div 使用背景平鋪。

左右浮動法

我的認爲左右浮動發是所有浮動法的升級版，修復了圓角圖片留白處不能透明的缺陷。原理與所有浮動法有些相似，但如今左圓角左浮動，右圓角右浮動，主體直接放後面。主體利用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 .right{float:right; width:8px; height:32px; background:url('images/roundBox_right.gif')

優勢：簡單、易上手。
缺點：須要清除浮動。
原理簡析：左圓角左浮動，右圓角右浮動，主體直接放後面

滑動門法

滑動門法是一種比較巧妙的方法，使用一個內嵌標籤，外部標籤爲左圓角，內嵌的標籤包含了背景與右圓角。要求切圖要按照特定的方式切出，切圖的圖片同浮動法不一樣。缺點就是對CSS掌握要求比較高，切圖也有特定的要求，且要注意寬度，儘可能的讓圖片足夠的長，防止寬度不夠圖片掉出狀況發生。