Spiffy Box：CSS圓角矩型產生器

Rachel Cunliffe在2006年的7個blog設計趨勢中提到，利用CSS技巧所製作的圓角矩形將在今年的blog版面大為流行，這其實並非偶然，Basement.org有一篇很棒的文章：Why Do We Love Rounded Corners，從iPod的設計談到了為什麼圓角會如此受到歡迎，簡單地說，圓的東西總是令人無法抗拒，忍不住想要握在手裡。

Spiffy Box是Spiffy Corners的作者Greg Johnson的新作，使用者只需要四個步驟就可以產生圓角矩形，並放到自己的網頁中，非常方便。

使用者只要在第一步驟時，依需要填入以下的值：

• 影像寬度（Image Width，即該圓角矩形的寬度）
• 影像高度（Image Height）
• 圓角半徑（Corner Radius）：值越大則所產生的圓角會越明顯。
• 前景色（Forground Color）：矩形內的顏色。
• 邊框顏色（Border Color）
• 背景色（Background Color）：矩形外的顏色，可填入與網頁背景相同的顏色。

剩餘的三個步驟，都是複製與貼上的工作。在步驟2時，使用者必須按右鍵將圓角矩形圖片另存新檔，預設的檔名為img.php.png，因為在後面的CSS語法當中會用到這張圖片，所以如果存成不同檔名，也要在CSS中作相應修改才行。

步驟3提供了這個圓角矩形效果的完整CSS樣式表，使用者複製之後，可以貼到網頁的head元素之內，放在<style type="text/css">和</style>之間；亦可以貼到獨立的CSS檔案中，如此便能在不同網頁中連結這個外部樣式表，重複使用相同的圓角矩形。

步驟4則提供了產生這個圓角矩形的XHTML原始碼，只要貼在網頁中適合的位置即可。

分析這段原始碼之後可以知道，這個圓角矩形分成了head與body兩個部分，在head處的文字，會套用h2元素的樣式，為放大後的粗體字，而body內的文字，則是包含在一般的p元素之內。各位可以參考我的範例網頁，這是用Spiffy Box的預設值所製作的圓角矩形。

可能的相關文章：

• CSS Tweak：線上CSS瘦身服務
• CSS技巧：使用兩張圖片作為網頁背景
• [jQuery] 可連結的區塊元素
• Blog＆Album變裝秀

這篇文章發表於 June 22nd, 2006 ，分類為：Webdev。你可以訂閱這篇文章的回應：RSS 2.0，也歡迎發表你的意見，或者從你的網站 Trackback 過來。