SV~

標題有點長，

聽說圓角矩形在css3很好用，

但是礙於不是每個人都方便建立css3的環境，

就只好用別的方式代替了。

首先先看效果：

就是那個漸層的藍色圓矩形上半部，

依樣畫葫蘆就可以用成四個邊角都是圓矩形的背景了~

原理很簡單，

圓矩形的構圖類似這樣：

加上最後加上，

而我們最主要變形的部分是中間。

這邊是用固定高度，如果不是固定高度則可以用抓位置+圖片<img>變形(width和height)。
如果我們有個區域要用這個東西當背景裝飾(像是title)，
假設那個區域是一個table：

<table  cellpadding="0" cellspacing="0" style="border: 0; width: 100%;"><tr><td class="top1"></td><td style="padding-right:5px;" class="top2"></td><td class="top3"></td></tr></table>

中間的部分padding-right是讓他自己改變寬度，而圓矩形的寬度是5px;
接著top1~3則是：

.top1{
width: 5px;
height: 30px; 
background-image:url(../images/top1.png); 
background-repeat:no-repeat; 
background-position:center;
}
.top2{
width: auto;
height: 30px; 
background-image:url(../images/top2.png); 
background-repeat:repeat-x; 
background-position:center;
}
.top3{
width: 5px;
height: 30px; 
background-image:url(../images/top3.png); 
background-repeat:no-repeat; 
background-position:center;
}

也就是只有top2的背景圖是往x軸重複。

top1.png~top3.png就是剛剛上面的那三張圖。

所以依此類推就能用table排出漂亮的圓矩形背景了，
要更精確的話可以將此table的z-index: -100;

也就是確保背景是在最下層。