對(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就是這樣：

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

CSS代碼如下：

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

CSS代碼如下：

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

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

CSS代碼如下：

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

CSS代碼如下：

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

最新評(píng)論