對，你沒有看錯，就是“純圖片”，不是純代碼實現(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代碼如下：

CSS代碼如下：

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

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

CSS代碼如下：

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

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

CSS代碼如下：

優(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代碼如下：

CSS代碼如下：

優(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代碼如下：

CSS代碼如下：

優(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ā)。

最新評論