做網頁常常使用一些技巧，比如在表格的四周加上圓角，這(zhè)樣(yàng)可以避直接使用表格的直角，而顯得過(guò)于呆闆,很多網友都(dōu)提到過(guò)解決的辦法，我們選取最有代表性兩(liǎng)種(zhǒng)方法來再現圓角表格的網站制作過(guò)程。

第一種(zhǒng)制作方法：

一、CSS3圓角的優點

傳統的圓角生成(chéng)方案，必須使用多張圖片作爲背景圖案。CSS3的出現，使得我們再也不必浪費時間去制作這(zhè)些圖片了，而且還(hái)有其他多個優點：

* 減少維護的工作量。圖片文件的生成(chéng)、更新、編寫網頁代碼，這(zhè)些工作都(dōu)不再需要了。

* 提高網頁性能(néng)。由于不必再發(fā)出多餘的HTTP請求，網頁的載入速度將(jiāng)變快。

* 增加視覺可靠性。某些情況下（網絡擁堵、服務器出錯、網速過(guò)慢等等），背景圖片會(huì)下載失敗，導緻視覺效果不佳。CSS3就(jiù)不會(huì)發(fā)生這(zhè)種(zhǒng)情況。

二、border-radius屬性

CSS3圓角隻需設置一個屬性：border-radius（含義是"邊框半徑"）。你爲這(zhè)個屬性提供一個值，就(jiù)能(néng)同時設置四個圓角的半徑。所有合法的CSS度量值都(dōu)可以使用：em、ex、pt、px、百分比等等。

比如，下面(miàn)是一個div方框：

現在設置它的圓角半徑爲15px：border-radius: 15px;

這(zhè)條語句同時將(jiāng)每個圓角的"水平半徑"（horizontal radius）和"垂直半徑"（vertical radius）都(dōu)設置爲15px。

border-radius可以同時設置1到4個值。如果設置1個值，表示4個圓角都(dōu)使用這(zhè)個值。如果設置兩(liǎng)個值，表示左上角和右下角使用第一個值，右上角和左下角使用第二個值。如果設置三個值，表示左上角使用第一個值，右上角和左下角使用第二個值，右下角使用第三個值。如果設置四個值，則依次對(duì)應左上角、右上角、右下角、左下角（順時針順序）。

border-radius: 15px 5px;

border-radius: 15px 5px 25px;

border-radius: 15px 5px 25px 0px;

（左下角的半徑爲0，就(jiù)變成(chéng)直角了。）

border-radius還(hái)可以用斜杠設置第二組值。這(zhè)時，第一組值表示水平半徑，第二組值表示垂直半徑。第二組值也可以同時設置1到4個值，應用規則與第一組值相同。

border-radius: 15px 5px / 3px;

border-radius: 15px 5px 25px 5px / 3px 5px 10px 15px;

浏覽器支持：

IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4，都(dōu)支持上述的border-radius屬性。早期版本的Safari和Chrome，支持-webkit-border-radius屬性，早期版本的Firefox支持-moz-border-radius屬性。

目前來看，爲了保證兼容性，隻需同時設置-moz-border-radius和border-radius即可。

　　-moz-border-radius: 15px;

　　border-radius: 15px;

（注意：border-radius必須放在最後(hòu)聲明，否則可能(néng)會(huì)失效。）

另外，早期版本Firefox的單個圓角的語句，與标準語法略有不同。

　　* -moz-border-radius-topleft（标準語法：border-top-left-radius）

　　* -moz-border-radius-topright（标準語法：border-top-right-radius）

　　* -moz-border-radius-bottomleft（标準語法：border-bottom-left-radius）

　　* -moz-border-radius-bottomright（标準語法：border-bottom-right-radius）

第二種(zhǒng)制作方法：

1. 做兩(liǎng)個圓角的圖片，這(zhè)兩(liǎng)個圖片可以先做一個圖片，然後(hòu)用photoshop軟件垂直翻轉一下就(jiù)行了。

2. 在兩(liǎng)個圖片中間插入一個背景顔色同圖片一樣(yàng)的表格，長(cháng)度也設爲圖片的長(cháng)度，將(jiāng)這(zhè)個表格的單元間距設爲1，其他都(dōu)爲0。

3. 將(jiāng)表格的單元格背景色設置爲白色（從2、3兩(liǎng)步可以看出這(zhè)裡(lǐ)其實是制作了一個細線邊框的表格）

4. 最後(hòu)我們就(jiù)可以在表格裡(lǐ)面(miàn)填寫内容了，我們可以把這(zhè)個部分當然一個整體，複制并粘貼到頁面(miàn)上不同的地方，當然你也可以改變整個圓角表格的尺寸，要做的就(jiù)是改變圓角圖片和插入表格的尺寸了。

代碼如下：

<img height=15 src="http://www.sino-web.net/uploadfiles/20060823094159.gif" width=125> <br>

<table width="124" cellspacing="1" cellpadding="0" bgcolor="#0000FF">

<tr>

<td bgcolor="#FFFFFF"＞經(jīng)過(guò)這(zhè)樣(yàng)的處理後(hòu)表格是不是漂亮多了呢！</td></tr></table>

http://www.sino-web.net/uploadfiles/20060823094159.gif" width=125>

說明：其實就(jiù)是兩(liǎng)個圓角圖片與一個細線表格組合在一起(qǐ)。

第三種(zhǒng)制作方法：

1. 準備工作：制作兩(liǎng)個小圓角圖片，如右圖。可以先制作一個，讓後(hòu)用相關軟件翻轉就(jiù)可以了

2. 制作一個一行三列的表格。表格的單元間距、單元邊距、邊框均設置爲零。寬度默認爲100%，也可以設成(chéng)固定的寬度，本例設爲150像素。

3. 單擊“顯示隐藏指導方針”按鈕，并將(jiāng)第一步的兩(liǎng)個小圖片分别插入第一、第三單元格。然後(hòu)選中左邊的小圖片，再按一下向(xiàng)左的方向(xiàng)鍵，最後(hòu)按退格鍵，將(jiāng)小圖片前的一個空格删除。

4. 設置第一個單元格的水平對(duì)齊方式爲左對(duì)齊，垂直對(duì)齊方式爲頂部，使圖片在單元格的左上方，第三個單元格的水平對(duì)齊方式爲右對(duì)齊，垂直對(duì)齊方式爲頂部，使圖片在單元格的右上方。

5. 將(jiāng)每個單元單元格的背景色（注意是單元格）設置爲插入的圖片顔色相同。

6. 在下面(miàn)再插入一個同樣(yàng)邊框顔色的細線表格,現在就(jiù)可以在細線表格裡(lǐ)寫入内容了。

代碼如下：

<table width="150" cellpadding="0" cellspacing="0" border="0">

<tr bgcolor="#7090ff">

<td valign="top" align="left" width="10"><img src="411-w03.gif" width="7" height="7"></td>

<td width="127" bgcolor="#7090ff"> </td>

<td align="right" valign="top" width="10"><img src="411-w04.gif" width="7" height="7"></td>

</tr></table>

<table width="150" cellspacing="1" cellpadding="0" border="0" bgcolor="#7090ff"><tr><td bgcolor="#FFFFFF">這(zhè)種(zhǒng)表格是不是很眼熟啊？的确，我們可以在很多的大網站找到它的身影。</td></tr>

</table>

沈陽網站建設大熊科技說明：它由兩(liǎng)個單獨的表格組成(chéng)，其中第一個表格是出現圓角的關鍵。