基于CSS Sprites的可伸縮圓角矩形的設計

摘要:圓角矩形因為其樣式比直角矩形更加漂亮，所以現在的Web標準下大量的網頁布局都采用圓角矩形設計元素。該文結合CSS與圖片兩種實現圓角矩形技術的優勢，應用CSS Sprites設計了一種簡單、高效的圓角矩形實現模式。該模式不僅可以在Web頁面中多次調，具有重用性，而且還可以根據實際內容實現自動伸縮，便于設計者更加方便快捷的制作出布局美觀的網頁。

關鍵詞:圓角矩形;CSS Sprites;網頁;定位;伸縮

中圖分類號:TP311文獻標識碼:A文章編號:1009-3044(2010)11-2618-02

Design of Automatic Telescoping Rounded Corners Based on CSS Sprites

FAN Dong-yan

(Shanxi University Business College， Taiyuan 030031， China)

Abstract:Rounded corners as its style even more beautiful than the right angle rectangles; therefore a large number of homepage layout uses the design elementof rounded corners under present's Web standard. The paper designed a simple and efficient implementation model of rounded corners by combination with the technology advantages ofusing CSS and images. This model with reusable not only may transfer many times in the Web page， but also can realize automatic telescoping according to the actual content. It enables designers to create a more convenient and efficient layout of beautiful web page.

Key words:rounded corner; CSS Sprites; web page; location; telescoping

在網站設計制作過程中，為了使Web頁面的布局生動、美觀，通常會在布局中使用圓角矩形。網頁中的圓角矩形實現方法有圖片與CSS兩種:通常使用圖片做圓角矩形的時候，如果直接將圓角矩形作為背景圖片，則為了使圓角矩形能夠根據內容自由伸縮，需要將圓角矩形分割成三個圖片或更多，圖片用的過多，勢必會影響網站打開的速度;而用 CSS 實現圓角矩形時，雖然通用性強，修改簡單，但兼容性與代碼編寫比較麻煩，使用起來太復雜，需要在想要實現圓角的地方堆加幾個 DIV ，然后再設置樣式屬性，如果一個頁面要在多處使用圓角效果，而且還要不同的樣式，其工作量之繁瑣可想而知。

本文中實現圓角矩形的設計經過反復實驗，在分析了上述兩種設計方式的基礎上，綜合其優勢，設計了一種簡單、高效的圓角矩形實現方式，可以方便的用于Web頁面的制作中。

1 可伸縮圓角矩形的設計方法

通常提高網站加載速度的最有效的方式之一就是減少Client端與Server端間的HTTP Request次數，而網頁中的圖片以及數據的請求就成為了降低請求次數的關鍵，對于數據請求，目前可以通過Ajax技術實現，而對于圖片請求次數的降低，則需要通過CSS Sprites技術實現。即將網頁中需要用到的多個圖片整合到一張大圖片中，然后通過CSS的定位技術，在需要圖片的地方，將圖片定位在這一張大圖片上。對于當前網速而言，小于200KB的單張圖片的載入時間基本上是差不多的，但是，如果能夠降低請求次數，則對于提高網站加載速度大有裨益。

本文正是根據上述設計理念，在利用CSS Sprites技術的基礎上實現的。具體的設計思路為:在一個矩形的四角絕對定位四個小圓角圖形，同時利用CSS Sprites技術將四個小圓角放在一張圖片上，通過CSS的定位來實現圓角矩形效果。如圖1所示。

這種圓角矩形技術模型餐具了可以有效降低Client端與Server端間的請求次數外，其優點還表現在可以自由伸縮。因為四個圓角是固定在矩形上面的，矩形的寬度和高度可以隨意改變，這樣在一個網站中就可以任意調用了，根據所需大小的不同，只需要另外設置一個ID來控制大小即可。具體實現方法如下:

1.1 創建圓角Sprite

首先利用Fireworks軟件制作四個圓角。因為Fireworks可以將圖像定位到像素級別，所以比較適用于制作精確的圓角圖形。通過Fireworks切割并導出一個圓角之后，通過翻轉、復制，得到另外的三個圓角，然后將所需的四個圓角放在一張圖片上(以一個像素的白線來區分)，如圖2所示。最后導出合成的圖片，Sprite就創建完成了。

1.2 設計圓角矩形容器

在編寫布局代碼時，首先給容器 div定義一個.roundedBox類實現上述的矩形;然后再定義四個div 容器，并給每個div 容器加載一個類 .corner，用來指定前面所創建的圓角的位置。代碼如下所示:

網頁中圓角矩形的設計模型

1.3 設計CSS樣式

根據CSS定位規則:絕對定位元素通常都依照相對定位的父元素進行定位，如果這個元素沒有已定位的父元素，那么它會上溯到頂級元素body 標簽進行定位。

1)定位并設置所有的圓角

對于所有的圓角圖形，都必須定義絕對定位，并且利用corner類控制其高度和寬度，如果需要改變圓角圖形的圓角度數以及高度，直接修改圖片之后，改變corner定義即可，這樣可以使該設計方法更具有實用性。

如圖2所示本文中圓角定義的寬度和高度都是 20px.

.corner {position:absolute;width:20px;height:20px;}

2)定義 div 容器樣式:

首先對div容器作如下定位:

.roundedBox {position:relative;}

這樣任何定義有類 .roundedBox 的元素內，絕對定位元素都會相對于這個元素進行定位，而不是body標簽。 另外這里還要設置一些padding值，否則，圓角將會覆蓋其中的文本。在設置padding值時需要特別注意:top 和 bottom padding 值必須 等價于圓角的 height，left 和 right padding 值必須等價于圓角的寬度。由于在本文中設計的圓角寬度跟高度是相等的，因此四個邊角的padding 值也是相等的，即:

.roundedBox {position:relative; padding:20px; margin:10px 0;}

這里還可以通過設定 margin 給div 留出一定的空隙。

3)對沒有圓角的四個角作單獨定位

對于四個角的圖形定位，分別定義:toplefttoprightbottomleftbottomeright，而圓角圖形區域內的文字則用cont控制或者一個P標簽控制即可。

.topLeft { top:0; left:0; background-position:-1px -1px;}

.topRight { top:0; right:0; background-position:-20px -1px;}

.bottomLeft { bottom:0; left:0; background-position:-1px -20px;}

.bottomRight { bottom:0; right:0; background-position:-20px -20px;}

.cont { padding:20px;}

1.4 融合sprite實現自動伸縮

由于.roundedBox類僅僅用了控制矩形的padding和margin值，因此要實現矩形的自動伸縮，還需要在容器 div另外再定義一個ID=\"type1\"，用來控制矩形的寬度和高度，這樣就可以保證在網頁的任何地方都可以調用這個圖形。

…

#type1 { height:100%; width:400px; }

接著需要給 #type1 匹配一個背景色，使之融合于 sprite 中的圓角:

#type1 {background-color:#666666;}

之后，通過定義 .corner 類來協助圓形盒模型載入 Sprite 樣式:

#type1 {background-color:#666666;}

#type1 .corner {background-image:url(../images/corners-type1.gif);}

這樣一個完整的圓角矩形模型就制作完成了，其效果如圖3所示。

如果在網頁中的不同部位應用圓角矩形框，則可通過修改其CSS代碼中的定位值及背景顏色值進行調用，其應用效果如圖4所示。

2 結束語

本方法設計的圓角矩形框可以根據內容進行自動伸縮，而且可以在網頁中多次調用，因此對于網頁的布局具有一定的實用價值。但此模型在實際應用時仍需進一步改進，例如在目前的瀏覽器中瀏覽網頁時，必須給容器確定寬度及高度。如果不定義，則會影響頁面布局效果。因此希望在今后的研究工作中進一步完善此技術，使得其在應用時更加便捷、簡單。

參考文獻:

[1] 杜現朝，許建平，龍懷冰，等.Web標準中的定位原理及其應用[J].計算機工程與設計，2008(23).

[2] 張燁燁.網頁版式設計研究[D].中國優秀碩士學位論文全文數據庫，2009(11).

[3] 梁小芳.高級Web標準-CSS盒子模型研究[J].電腦知識與技術，2009(21).

[4] 蘭嵐.基于網頁界面視覺藝術元素的分析與研究[D].中國優秀碩士學位論文全文數據庫，2010(1).

[5] 李曉蕙.網頁游戲中界面設計的研究和應用[D].上海:上海交通大學，2008.

[6] Budd A，Collison S，Moll C.CSS Mastery: Advanced Web Standards Solutions[M].friends of ED，Published，2006.