| 初步介紹 當(dāng)然，我知道現(xiàn)在有成千上萬個(gè)關(guān)于 用CSS處理圓角 的教程，但不管怎么說，我仍然想把這篇文章展示給您。也希望您會(huì)發(fā)現(xiàn)這篇文章會(huì)非常有用。需要重點(diǎn)指出的是，這篇教程徹底地應(yīng)用高級(jí)CSS技術(shù)，但是，我會(huì)盡力使初學(xué)者看起來簡(jiǎn)單。CSS3 在這里還沒有得到完全的應(yīng)用，所以，知道現(xiàn)在，我會(huì)保持W3C驗(yàn)證的有效。 |
看一下演示 | 下載 css sprites + 圓角
我們將怎樣來處理?
我處理圓角的版本是由內(nèi)置的絕對(duì)定位的四個(gè)div組成，每個(gè)div都有唯一的圓角圖片作CSS Sprite操作。我們將會(huì)這樣做:
是什么方式導(dǎo)致這項(xiàng)技術(shù)表現(xiàn)得這么了不起呢（What makes this technique cool）?
通過可變的寬度和高度處理毗鄰的元素的能力。沒有極限。（The ability to make rounded-bordered elements with fluid width and height. No limits whatsoever.） 這項(xiàng)技術(shù)，正如我之前提到的，是與 CSS Sprites 結(jié)合操作完成的。
第一步: 創(chuàng)建我們的 Sprite
- 為矩形圓角圖片處理選擇一款編輯器 (在這個(gè)案例中我選擇的是Firework).
- 切割并且導(dǎo)出圓角到本地臨時(shí)位置 (我們將會(huì)在之后用到).
- 新創(chuàng)建一個(gè)文件，將圓角導(dǎo)入到這個(gè)新文件中，復(fù)制三次，然后旋轉(zhuǎn)這三個(gè)新切片得到另外的三個(gè)圓角。
- 合成四個(gè)圓角為一張圖片, 并用 1px 的紅線 來區(qū)分它們.
- 導(dǎo)出合成圖片，sprite 也就大功告成了。
[Page: ]
第二步: HTML 代碼
首先，我們會(huì)給層 div 一個(gè) .roundedBox
類 :
| <div class="roundedBox"></div> |
現(xiàn)在，我們必須再增加四個(gè) div ，這會(huì)在將來創(chuàng)建圓角的時(shí)候用到。之后必須給每個(gè)加載一個(gè)類 .corner，同時(shí)也標(biāo)識(shí)一個(gè)類來指定它們格子的位置。
| <div class="roundedBox"> <strong>My content in roundedBox Type 1</strong> <div class="corner topLeft"></div> <div class="corner topRight"></div> <div class="corner bottomLeft"></div> <div class="corner bottomRight"></div> </div> |
一切搞定? 嗯，讓我們把注意力再轉(zhuǎn)移到 CSS 代碼上來。
[Page: ]
第三步: CSS 代碼
如你所知, (或者您會(huì)在這里快速學(xué)習(xí)到) 絕對(duì)定位元素通常都依照相對(duì)定位的父元素進(jìn)行定位。. If this element is not defined, they will take as their parent relatively-positioned element, the body tag.如果這個(gè)父元素?zé)o法界定，那么它會(huì)去最近作相對(duì)定位的那個(gè)父元素，直至 body 標(biāo)簽。 哈?! - 好了，如果到此為止您仍沒有掌握，不用擔(dān)心，我們將在第二部分了解它。（翻譯得有點(diǎn)拗，附上原文：Ok, if you didn’t get this, don’t worry, you’ll catch it in an second.）
讓我們先來定義下所有的圓角
所有的圓角都必須定義絕對(duì)定位，并且注明高度跟寬度。 我的圓角定義的寬度跟高度都是 17px.
| .corner { position:absolute; width:17px; height:17px; } |
如果您是第一次切割矩形圓角，那么寬度跟高度很可能會(huì)不一樣 (咄!)。
現(xiàn)在開始定義 div 層樣式:
| .roundedBox {position:relative;} |
任何定義有類 .roundedBox 的元素內(nèi)，絕對(duì)定位元素都會(huì)相對(duì)于這個(gè)元素進(jìn)行定位，而不是標(biāo)簽 body。 我們也必須設(shè)置一些padding值，如果沒有設(shè)置，圓角將會(huì)覆蓋我們的文本，這肯定不是我們想要的效果。 重要提示: top 和 bottom padding 值必須 等價(jià)于圓角的 height。left 和 right padding 值必須等價(jià)于圓角的寬度。 正如您已經(jīng)知道的，我的圓角寬度跟高度是相等的，因此，四個(gè)邊角的padding 值也是相等的:
| .roundedBox {position:relative; padding:17px; margin:10px 0;} |
我也通過 margin 給我們的 div 流出了一定的空隙。
最后，讓我們對(duì)沒有圓角作單獨(dú)定義
[Page: ]
我們會(huì)對(duì)每個(gè)圓角作絕對(duì)定位設(shè)置，并且定位背景圖的位置 (根據(jù)我們的 sprite):
| .roundedBox {position:relative; padding:17px; margin:10px 0;} .corner {position:absolute; width:17px; height:17px;} .topLeft {top:0; left:0; background-position:-1px -1px;} .topRight {top:0; right:0; background-position:-19px -1px;} .bottomLeft {bottom:0; left:0; background-position:-1px -19px;} .bottomRight {bottom:0; right:0; background-position:-19px -19px;} |
您可能已經(jīng)注意到，我們的樣式仍然還沒有下載 sprite。我們一般不會(huì)去定義它們的原因是，我們會(huì)使用另外的方法。
圓形盒模型 1 (藍(lán)色)
HTML 代碼
| <div class="roundedBox" id="type1"> <strong>My content in roundedBox Type 1</strong> <div class="corner topLeft"></div> <div class="corner topRight"></div> <div class="corner bottomLeft"></div> <div class="corner bottomRight"></div> </div> |
我們必須給層 div 定義一個(gè)ID為 #type1，用來實(shí)施特殊背景。
CSS 代碼
首先，我們得給 #type1 匹配一個(gè)背景色，使之融合于 sprite 中的圓角:
#type1 {background-color:#CCDEDE;}
之后，通過定義 .corner 類來協(xié)助圓形盒模型載入 Sprite 樣式:
| #type1 {background-color:#CCDEDE;} #type1 .corner {background-image:url(../images/corners-type1.gif);} |
好了，我們的第一個(gè)圓角矩形大功告成了！預(yù)覽圓角矩形模型1 (藍(lán)色)
圓形盒模型 2 (綠色) / 圓形盒模型 3 (紫色)
模型1，模型2跟模型3的唯一差別就是它們的顏色，所以我們也僅僅只修改這些。
模型 2 (綠色)
HTML 代碼
| <div class="roundedBox" id="type2"> <strong>My content in roundedBox Type 2</strong> <div class="corner topLeft"></div> <div class="corner topRight"></div> <div class="corner bottomLeft"></div> <div class="corner bottomRight"></div> </div> |
CSS 代碼 (僅僅修改 sprites 的顏色及背景色)
| #type2 {background-color:#CDDFCA;} #type2 .corner {background-image:url(../images/corners-type2.gif);} |
模型 3 (紫色)
HTML 代碼
| <div class="roundedBox" id="type3"> <strong>My content in roundedBox Type 3</strong> <div class="corner topLeft"></div> <div class="corner topRight"></div> <div class="corner bottomLeft"></div> <div class="corner bottomRight"></div> </div> |
CSS 代碼 (僅僅修改 sprites 的顏色及背景色)
| #type3 {background-color:#D3CADF;} #type3 .corner {background-image:url(../images/corners-type3.gif);} |
預(yù)覽圓角矩形模型 3 (紫色). 都學(xué)會(huì)了嗎？好，現(xiàn)在我們?cè)龠M(jìn)一步學(xué)習(xí)
模型 4 (紅色邊框)
模型4 跟模型1、2、3又有什么區(qū)別呢？邊框和顏色，讓我們來解決這些因素吧。
HTML 代碼
| <div class="roundedBox" id="type4"> <strong>My content in roundedBox Type 4</strong> <div class="corner topLeft"></div> <div class="corner topRight"></div> <div class="corner bottomLeft"></div> <div class="corner bottomRight"></div> </div> |
CSS 代碼 (在 sprite 中給您的邊角的邊框都添上邊框，并使 .roundedBox 類的背景及邊框融合 sprite。)
| #type4 {background-color:#CCACAE; border:1px solid #AD9396;} #type4 .corner {background-image:url(../images/corners-type4.gif);} |
好了，這個(gè)就是截圖效果。我們的邊角還不能正確地覆蓋 #type4 邊框。所以我們必須矯正它們的定位來覆蓋早期的定位樣式。讓我們做到這一點(diǎn):
| #type4 {background-color:#CCACAE; border:1px solid #AD9396;} #type4 .corner {background-image:url(../images/corners-type4.gif);} #type4 .topLeft {top:-1px;left:-1px;} #type4 .topRight {top:-1px; right:-1px;} #type4 .bottomLeft {bottom:-1px; left:-1px;} #type4 .bottomRight {bottom:-1px; right:-1px;} |
好了，這就是我們完成的模型 4。預(yù)覽圓角矩形模型4 (紅色邊框). We are almost there, don’t quit now :p
模型 5 (垂直漸變)
好了，模型5會(huì)需要更多的工作量，我們應(yīng)該這樣:
- 修改上下邊角的高度 (由漸變度決定(depending on your gradient))。
- 修改上下邊角的背景圖定位 (由漸變度決定)。
- 通過重復(fù)平鋪 1px 的背景圖片來創(chuàng)建層 div 的漸變效果。
- 值得注意的是，我們必須給內(nèi)容設(shè)置一個(gè)大小，或者給層設(shè)置一個(gè)最小高度(由漸變度決定)。
讓我們開始吧。
[Page: ]
HTML 代碼 (跟之前的一樣)
| <div class="roundedBox" id="type5"> <strong>My content in roundedBox Type 5</strong> <div class="corner topLeft"></div> <div class="corner topRight"></div> <div class="corner bottomLeft"></div> <div class="corner bottomRight"></div> </div> |
CSS 代碼
我的漸變是從上到下垂直的。所以我們必須增加上邊角的高度，以及更改下邊角的背景圖位置。當(dāng)您看到我的新的 sprite 就會(huì)明白為什么會(huì)這么處理。就是下面這張: 我的div中的背景圖片是這樣的: 1px 的寬度，它的確是存在的。 我的下邊角有一條實(shí)心顏色，剛好可以匹配div的背景色。 少說話多行動(dòng)。我們來繼續(xù)定義層 div :
| #type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;} |
給層設(shè)置的背景顏色是我從底部邊角中吸取的。然后將背景圖片按 x 方向進(jìn)行重復(fù)。最后我給它設(shè)置一個(gè)最小高度，正如我之前所說的，漸變才不會(huì)泄露。最后來加上所有的邊角 (我將文件的類型修改為 .png 格式的圖片，為的是能得到更好的漸變質(zhì)量):
| #type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;} #type5 .corner {background-image:url(../images/corners-type5.png);} |
現(xiàn)在，我增加上邊角的高度 (這是由漸變最后抵達(dá)的顏色位置決定的):
| #type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;} #type5 .corner {background-image:url(../images/corners-type5.png);} #type5 .topLeft, #type5 .topRight {height:140px;} |
最后，我糾正下下邊角的背景圖定位:
| #type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;} #type5 .corner {background-image:url(../images/corners-type5.png);} #type5 .topLeft, #type5 .topRight {height:140px;} #type5 .bottomLeft {background-position:-1px -142px;} #type5 .bottomRight {background-position:-19px -142px;} |
全部完成! - 預(yù)覽圓角矩形模型 5 (垂直漸變)
IE6 版本
這項(xiàng)技術(shù)在這一令人討厭的瀏覽器中是有問題的。我們必須給層 (.roundedBox, or #type1, #type2, 等等) 確定寬度跟高度。如果您沒有定義它，那么它會(huì)泄露到盒模型之外。 使用 IE6 條件式注釋法來定義它。
最后的想法
我希望這項(xiàng)技術(shù)對(duì)您會(huì)有幫組，并且不會(huì)顯得太難。垂直漸變、透明的角落，只要多加練習(xí)，您的腦袋會(huì)變得更加好用，也會(huì)更加容易定義樣式。
