首先來簡單說一下什麼是Sprites，Sprites是一種網頁圖片應用程式處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。對於目前網路流行的速度而言，不高於200KB的單張圖片的所需載入時間基本上是差不多的，所以無需顧忌這個問題。
第一步：建立我們的 Sprite
用PS等工具合成如圖所示的圖片（以一個像素的紅線來區分）
第二步：寫HTML程式碼
首先，我們會給容器 div 一個 .roundedBox類別 :
現在，我們必須再增加四個div ，這會在將來創建圓角的時候使用。之後必須給每個載入一個類別 .corner，同時也標識一個類別來指定它們格子的位置。
第三步：寫出CSS樣式
絕對定位元素通常都依照相對定位的父元素來定位。如果這個父元素無法界定，那麼它會去最近作相對定位的那個父元素，直到 body 標籤。
讓我們先定義下所有的圓角
所有的圓角都必須定義絕對定位，並且註明高度跟寬度。我的圓角定義的寬度跟高度都是 17px.
現在開始定義 div 容器樣式:
任何定義有類別 .roundedBox 的元素內，絕對定位元素都會相對於這個元素進行定位，而不是標籤 body。我們也必須設定一些padding值，如果沒有設置，圓角將會覆蓋我們的文本，這肯定不是我們想要的效果。重要提示: top 和 bottom padding 值必須 等價於圓角的 height。 left 和 right padding 值必須等價於圓角的寬度。正如您已經知道的，我的圓角寬度跟高度是相等的，因此，四個邊角的padding 值也是相等的:
讓我們對沒有圓角作單獨定義
我們會對每個圓角作絕對定位設置，並且定位背景圖的位置 (根據我們的 sprite):
最後，給 #type1 一個背景色，使之融合於 sprite 中的圓角:
全部的程式碼：
