CSS建立圓角框

我們接下來會建立一個xHTML頁面，內含兩個分別被ID為fixedBox與FlowBox的DIV所包含的兩個內容區域，分別為固定寬度與不固定寬度的兩個DIV，現在我們來為這兩個DIV加上圓角。

我們所使用的理論是：在為元素添加背景時，背景圖片總是顯示在背景色之上；要創建單色的圓角矩形框，我們可以先創建一個正常的矩形框，然後，使用與背景色一致的圓角圖來做這個元素的四圓角背景，就可以組成一個圓角框了。以下分為兩種情況—固定大小的框與流式不固定大小的框再詳細說明方法。

為固定大小的方塊新增圓角第一步：建立基本xHTML文檔，並在其中新增少許內容
view plaincopy to clipboardprint?

view plaincopy to clipboardprint?
body, html {
margin:0;
padding:0;
background:#a7a09a;
color:#000;
}

body, html {
margin:0;
padding:0;
background:#a7a09a;
color:#000;
}第二步：設定DIV的寬度大小與背景顏色
view plaincopy to clipboardprint?
div#fixedBox {
width:340px;
margin:40px;
background:#E4ECF9;
}

div#fixedBox {
width:340px;
margin:40px;
background:#E4ECF9;
}第三個步驟：根據DIV的寬度來製作圓角矩形由於我設定了DIV的寬度為340px，所以我現在需要製作一個寬度也為340px的圓角矩形，製作完成矩形之後，將整個矩形最上部與最下部裁切出來當DIV的圖片圖，我製作如下兩張圖片：

第四步：將圖片應用於DIV背景之上
view plaincopy to clipboardprint?
div#fixedBox {
width:340px;
margin:40px;
background:#E4ECF9 url(images/bottom.gif) no-repeat bottom center;
}

div#fixedBox {
width:340px;
margin:40px;
background:#E4ECF9 url(images/bottom.gif) no-repeat bottom center;
}div#fixedBox h2{
margin:0;
padding:2px;
background:#E4ECF9 url(images/top.gif) no-repeat top center;
}

上面我們將名為Bottom.gif的圖片應用在DIV的最下方，再把Top.gif用在DIV的第一個元素H2之上，當然，這裡我們首先要注意的問題就是不能為h2添加Margin值或為DIV添加Padding或Border等。

創建非固定寬度的圓角框上面我們說過的只是創建固定寬度不固定高度的圓角框，這樣需要上下兩張圖片，那麼，現在如果我們把寬度與高度都不固定了，稍微思考一下，會發現，這次我們會得使用4張圖片才行，每一個角一張圖片才能創建出可任何收縮的圓角矩形，我們還是先來創建一個DIV容器，加入基本內容。

第一步：建立xHTML文檔
view plaincopy to clipboardprint?

第二步，建立圓角創造四個圓角，其圓角方向分別為左上、左下、右上、右下，我製作完成的圓角如下：

步驟三：設定DIV的背景色

view plaincopy to clipboardprint?
div#flowBox {
margin:40px;
background:#C3D9FF;
}

div#flowBox {
margin:40px;
background:#C3D9FF;
}第五步：加入圓角

對於不固定寬度與高度的DIV容器來說，任何一個圓角都必須能根據DIV的寬度與高度的變化來改變自己的位置，所以我們只能把在固定寬度DIV裡使用的固定寬度的圖片處理成為兩個小圖片，並且以將可以直接在H2元素上添加，現在我們為H2元素添加之後，只得到一邊的圓角，還差一個圓角將可以使用H2中的Span獲得，這樣就解決了兩個圓角了，而p元素可以提供一個圓角，再div本身一個，剛好四個圓角。

view plaincopy to clipboardprint?
div#flowBox {
margin:40px;
background:#C3D9FF url(images/bottom-left.gif) no-repeat bottom left;
}

div#flowBox h2{
margin:0;
padding:0;
background:#C3D9FF url(images/top-left.gif) no-repeat top left;
}

div#flowBox h2 span{
margin:0;
display:block;
background:#C3D9FF url(images/top-right.gif) no-repeat top right;
}

div#flowBox p{
margin:0;
padding:0;
background:#C3D9FF url(images/bottom-right.gif) no-repeat bottom right;
}