• 看一下演示
• 下載 css sprites + 圓角

您還可以參考一下文章：
43個(gè)PSD轉(zhuǎn)XHTML, CSS創(chuàng)建布局及導(dǎo)航輔導(dǎo)教程,解析事件背后的每一個(gè)步驟

我們將怎樣來(lái)處理?
我處理圓角的版本是由內(nèi)置的絕對(duì)定位的四個(gè)div組成，每個(gè)div都有唯一的圓角圖片作CSS Sprite操作。我們將會(huì)這樣做:

是什么方式導(dǎo)致這項(xiàng)技術(shù)表現(xiàn)得這么了不起呢（What makes this technique cool）?

通過(guò)可變的寬度和高度處理毗鄰的元素的能力。沒(méi)有極限。（The ability to make rounded-bordered elements with fluid width and height. No limits whatsoever.） 這項(xiàng)技術(shù)，正如我之前提到的，是與 CSS Sprites 結(jié)合操作完成的。如果您不知道這是項(xiàng)怎樣的技術(shù)或者說(shuō)不知道怎么使用它，那么請(qǐng)先閱讀我 之前的文章。CSS sprites 都學(xué)會(huì)了嗎? 那我們就開(kāi)始吧!

第一步: 創(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 的紅線 來(lái)區(qū)分它們. 
 

5、導(dǎo)出合成圖片，sprite 也就大功告成了。