CSS3圓角介紹
CSS3圓角的優(yōu)點(diǎn)
傳統(tǒng)的圓角生成方案，必須使用多張圖片作為背景圖案。CSS3的出現(xiàn)，使得我們再也不必浪費(fèi)時間去制作這些圖片了，而且還有其他多個優(yōu)點(diǎn)：
* 減少維護(hù)的工作量。圖片文件的生成、更新、編寫網(wǎng)頁代碼，這些工作都不再需要了。
* 提高網(wǎng)頁性能。由于不必再發(fā)出多余的HTTP請求，網(wǎng)頁的載入速度將變快。
* 增加視覺可靠性。某些情況下（網(wǎng)絡(luò)擁堵、服務(wù)器出錯、網(wǎng)速過慢等等），背景圖片會下載失敗，導(dǎo)致視覺效果不佳。CSS3就不會發(fā)生這種情況。
CSS3 border-radius 屬性
基本語法：
border-radius ： none | <length>{1,4} [/ <length>{1,4} ]?
取值范圍：
<length>： 由浮點(diǎn)數(shù)字和單位標(biāo)識符組成的長度值。不可為負(fù)值。
簡單說明：
border-radius 是一種縮寫方法。如果“/”前后的值都存在，那么“/”前面的值設(shè)置其水平半徑，“/”后面值設(shè)置其垂直半徑。如果沒有“/”，則水平和垂直半徑相等。另外其四個值是按照top-left、top-right、bottom-right、bottom-left的順序來設(shè)置的其主要會有下面幾種情形出現(xiàn)：
1、只有一個值，那么 top-left、top-right、bottom-right、bottom-left 四個值相等。
2、有兩個值，那么 top-left 等于 bottom-right，并且取第一個值；top-right 等于 bottom-left，并且取第二個值
3、有三個值，其中第一個值是設(shè)置top-left;而第二個值是 top-right 和 bottom-left 并且他們會相等,第三個值是設(shè)置 bottom-right。
4、有四個值，其中第一個值是設(shè)置 top-left 而第二個值是 top-right 第三個值 bottom-right 第四個值是設(shè)置 bottom-left。
只有一個值：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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中文網(wǎng)(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中文網(wǎng)(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中文網(wǎng)(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屬性。
目前來看，為了保證兼容性，只需同時設(shè)置-moz-border-radius和border-radius即可。
-moz-border-radius: 15px;
border-radius: 15px;
（注意：border-radius必須放在最后聲明，否則可能會失效。）
雖然各大瀏覽器都支持border-radius，但是在某些細(xì)節(jié)上，實(shí)現(xiàn)都不一樣。當(dāng)四個角的顏色、寬度、風(fēng)格（實(shí)線框、虛線框等）、單位都相同時，所有瀏覽器的渲染結(jié)果基本一致；一旦四個角的設(shè)置不相同，就會出現(xiàn)很大的差異。
并非所有瀏覽器，都支持將圓角半徑設(shè)為一個百分比值。目前最安全的做法，就是將每個圓角邊框的風(fēng)格和寬度，都設(shè)為一樣的值，并且避免使用百分比值。
