CSS製作四邊具有圓角的DIV教學

目前網頁實例上，由於可以任意編寫html，其實是可以很輕鬆達到這種結果的。這裡就以Blogger本站的sidebar為例子。Blogger雖然可以修改範本，但是畢竟這是人家寫好的template，基本上在修改部份就有了些限制，不熟稔網路語法的就會很難入門。

首先，準備好3張圖。以本站為例如下附圖，紅光圈起來的地方：

分別為一張top的圓角、底部bottom的圓角，以及一張中間沒有圓角的圖，用來當作背景。

再來，我們來分析一下Blogger在sidebar的html語法架構，

Blogger的預設側邊欄，共有2欄，分別為sidebartop-wrap、sidebarbottom-wrap1，形式都是div。以sidebartop-wrap來說(sidebarbottom-wrap1亦同)結構再細分為sidebartop-wrap、sidebartop-wrap2以及sidebartop，主要的部落格元素都是放在sidebartop裡面。也就是說，一個top的sidebar，總共有三層div結構，每一層div都能指定一種背景，因此原則就是把剛剛那3張圖素分別指定到3個圖層的背景，基本上一個具有圓角的sidebar就完成了！

將3張圖素上傳之後，會得到一個位址，請先記錄下來。接著打開「範本」>「修改範本HTML」，找到「#sidebartop-wrap」，將原本定義的背景style註解起來，並且增加一段樣式設定，如下：

#sidebartop-wrap {
/*background:$topSidebarBgColor url("原始背景位址") no-repeat left bottom;*/
margin:5px 0px 15px;
padding:0px 0 5px;
color:$topSidebarTextColor;
}
html>body #sidebartop-wrap{background:背景底色 url("bottom圖片位址") no-repeat left bottom;}


接著順序修改sidebartop-wrap2，並增加sidebartop的CSS樣式：

#sidebartop-wrap2 {
background:url("top圖片位址") no-repeat left top;
padding:9px 0 0px;
margin:0;
border-width:0;
}
#sidebartop{
background:url("中間無圓角的圖片位址");
}


基本上到這裡其實已經修改完畢，但是因為IE6會跑出間隔，因此還必須增加以下語法作修正。

然後找到<div id="sidebartop-wrap2">語法位置，增加紅色部份在2個</div></div>之前：

<div id='sidebartop-wrap'><div id='sidebartop-wrap2'>
<b:section class='sidebar' id='sidebartop'>...</b:section>
<!--[if lte IE 6]><img src="bottom圖片位址" /><!--[endif]--></div></div>


按下「儲存範本」，重新檢視Blog，大致上就可以完成了！本站的bottom圖片是放在sidebartop-wrap之下，若要放在sidebartop-wrap2也是可以！只要將上面語法兩者互換，一樣可以達到效果！
以上，希望能對大家有點幫助囉！