CSS3圓角介紹
CSS3圓角的優(yōu)點(diǎn)
傳統(tǒng)的圓角產(chǎn)生方案，必須使用多張圖片作為背景圖案。 CSS3的出現(xiàn)，使得我們?cè)僖膊槐乩速M(fèi)時(shí)間去製作這些圖片了，而且還有其他多個(gè)優(yōu)點(diǎn)：
* 減少維護(hù)的工作量。圖片檔案的產(chǎn)生、更新、編寫(xiě)網(wǎng)頁(yè)程式碼，這些工作都不再需要了。
* 提升網(wǎng)頁(yè)效能。由於不必再發(fā)出多餘的HTTP請(qǐng)求，網(wǎng)頁(yè)的載入速度將會(huì)變快。
* 增加視覺(jué)可靠度。某些情況下（網(wǎng)路壅塞、伺服器出錯(cuò)、網(wǎng)速過(guò)慢等等），背景圖片會(huì)下載失敗，導(dǎo)致視覺(jué)效果不佳。 CSS3就不會(huì)發(fā)生這種情況。
CSS3 border-radius 屬性
基本語(yǔ)法：
border-radius ： none | <length>{1,4} [/ < ;length>{1,4} ]?
取值範(fàn)圍：
<length>： 由浮點(diǎn)數(shù)數(shù)字和單位識(shí)別碼組成的長(zhǎng)度值。不可為負(fù)值。
簡(jiǎn)單說(shuō)明：
border-radius 是一種縮寫(xiě)方法。如果“/”前後的值都存在，那麼“/”前面的值設(shè)定其水平半徑，“/”後面值設(shè)定其垂直半徑。如果沒(méi)有“/”，則水平和垂直半徑相等。另外其四個(gè)值是按照top-left、top-right、bottom-right、bottom-left的順序來(lái)設(shè)定的其主要會(huì)有下面幾種情形出現(xiàn)：
1、只有一個(gè)值，那麼top-left、top-right、bottom-right、bottom-left 四個(gè)值相等。
2、有兩個(gè)值，那麼top-left 等於bottom-right，並且取第一個(gè)值；top-right 等於bottom-left，並且取第二個(gè)值
# 3 、有三個(gè)值，其中第一個(gè)值是設(shè)定top-left;而第二個(gè)值是top-right 和bottom-left 並且他們會(huì)相等,第三個(gè)值是設(shè)定bottom-right。
4、有四個(gè)值，其中第一個(gè)值是設(shè)定 top-left 而第二個(gè)值是 top-right 第三個(gè)值 bottom-right 第四個(gè)值是設(shè)定 bottom-left。
只有一個(gè)值：
<!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>有兩個(gè)值：
<!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>有三個(gè)值：
<!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個(gè)值：
<!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屬性。
目前來(lái)看，為了確保相容性，只需同時(shí)設(shè)定-moz-border-radius和border-radius即可。
-moz-border-radius: 15px;
border-radius: 15px;
（注意：border-radius必須放在最後聲明，否則可能會(huì)失效。）
雖然各大瀏覽器都支援border-radius，但是在某些細(xì)節(jié)上，實(shí)作都不一樣。當(dāng)四個(gè)角落的顏色、寬度、風(fēng)格（實(shí)線框、虛線框等）、單位都相同時(shí)，所有瀏覽器的渲染結(jié)果基本上一致；一旦四個(gè)角落的設(shè)定不相同，就會(huì)出現(xiàn)很大的差異。
並非所有瀏覽器，都支援將圓角半徑設(shè)為一個(gè)百分比值。目前最安全的做法，就是將每個(gè)圓角邊框的風(fēng)格和寬度，都設(shè)為一樣的值，並且避免使用百分比值。
