CSS3圓角的優點
傳統的圓角產生方案，必須使用多張圖片作為背景圖案。 CSS3的出現，使得我們再也不必浪費時間去製作這些圖片了，而且還有其他多個優點：
* 減少維護的工作量。圖片檔案的產生、更新、編寫網頁程式碼，這些工作都不再需要了。
* 提升網頁效能。由於不必再發出多餘的HTTP請求，網頁的載入速度將會變快。
* 增加視覺可靠度。某些情況下（網路壅塞、伺服器出錯、網速過慢等等），背景圖片會下載失敗，導致視覺效果不佳。 CSS3就不會發生這種情況。
CSS3 border-radius 屬性
基本語法：
border-radius ： none | <length>{1,4} [/ < ;length>{1,4} ]?
取值範圍：
<length>： 由浮點數數字和單位識別碼組成的長度值。不可為負值。
簡單說明：
border-radius 是一種縮寫方法。如果“/”前後的值都存在，那麼“/”前面的值設定其水平半徑，“/”後面值設定其垂直半徑。如果沒有“/”，則水平和垂直半徑相等。另外其四個值是按照top-left、top-right、bottom-right、bottom-left的順序來設定的其主要會有下面幾種情形出現：
1、只有一個值，那麼top-left、top-right、bottom-right、bottom-left 四個值相等。
2、有兩個值，那麼top-left 等於bottom-right，並且取第一個值；top-right 等於bottom-left，並且取第二個值
# 3 、有三個值，其中第一個值是設定top-left;而第二個值是top-right 和bottom-left 並且他們會相等,第三個值是設定bottom-right。
4、有四個值，其中第一個值是設定 top-left 而第二個值是 top-right 第三個值 bottom-right 第四個值是設定 bottom-left。
只有一個值：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div
{
width: 150px;
height: 80px;
border: 2px solid #f36;
border-radius: 20px;
background: #ccc;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>有兩個值：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div
{
width: 150px;
height: 80px;
border: 2px solid #f36;
border-radius: 30px 20px;
background: #ccc;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>有三個值：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div
{
width: 150px;
height: 80px;
border: 2px solid #f36;
border-radius: 30px 20px 0;
background: #ccc;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>有4個值：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div
{
width: 150px;
height: 80px;
border: 2px solid #f36;
border-radius: 30px 20px 0 40px;
background: #ccc;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>瀏覽器支援
IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4，都支援上述的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必須放在最後聲明，否則可能會失效。）
雖然各大瀏覽器都支援border-radius，但是在某些細節上，實作都不一樣。當四個角落的顏色、寬度、風格（實線框、虛線框等）、單位都相同時，所有瀏覽器的渲染結果基本上一致；一旦四個角落的設定不相同，就會出現很大的差異。
並非所有瀏覽器，都支援將圓角半徑設為一個百分比值。目前最安全的做法，就是將每個圓角邊框的風格和寬度，都設為一樣的值，並且避免使用百分比值。
