|
初步介紹
當(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)證的有效。
您還可以參考一下文章：
43個(gè)PSD轉(zhuǎn)XHTML, CSS創(chuàng)建布局及導(dǎo)航輔導(dǎo)教程,解析事件背后的每一個(gè)步驟
我們將怎樣來處理?
我處理圓角的版本是由內(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é)合操作完成的。如果您不知道這是項(xiàng)怎樣的技術(shù)或者說不知道怎么使用它，那么請(qǐng)先閱讀我 之前的文章。CSS sprites 都學(xué)會(huì)了嗎? 那我們就開始吧!
第一步: 創(chuàng)建我們的 Sprite
1、為矩形圓角圖片處理選擇一款編輯器 (在這個(gè)案例中我選擇的是Firework).
2、切割并且導(dǎo)出圓角到本地臨時(shí)位置 (我們將會(huì)在之后用到).
3、新創(chuàng)建一個(gè)文件，將圓角導(dǎo)入到這個(gè)新文件中，復(fù)制三次，然后旋轉(zhuǎn)這三個(gè)新切片得到另外的三個(gè)圓角。
4、合成四個(gè)圓角為一張圖片, 并用 1px 的紅線 來區(qū)分它們.
5、導(dǎo)出合成圖片，sprite 也就大功告成了。
出處：譯言
責(zé)任編輯：bluehearts
上一頁 下一頁 CSS Sprites + 圓角 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 CSS Sprites + 圓角 [1]
第 2 頁 
