CSS3圓角介紹

CSS3圓角的優(yōu)點(diǎn)

傳統(tǒng)的圓角生成方案，必須使用多張圖片作為背景圖案。CSS3的出現(xiàn)，使得我們?cè)僖膊槐乩速M(fèi)時(shí)間去制作這些圖片了，而且還有其他多個(gè)優(yōu)點(diǎn)：

　　* 減少維護(hù)的工作量。圖片文件的生成、更新、編寫(xiě)網(wǎng)頁(yè)代碼，這些工作都不再需要了。

　　* 提高網(wǎng)頁(yè)性能。由于不必再發(fā)出多余的HTTP請(qǐng)求，網(wǎng)頁(yè)的載入速度將變快。

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

CSS3 border-radius 屬性

基本語(yǔ)法：

　　border-radius ： none | <length>{1,4} [/ <length>{1,4} ]?

取值范圍：

　　<length>：由浮點(diǎn)數(shù)字和單位標(biāo)識(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í)現(xiàn)都不一樣。當(dāng)四個(gè)角的顏色、寬度、風(fēng)格（實(shí)線框、虛線框等）、單位都相同時(shí)，所有瀏覽器的渲染結(jié)果基本一致；一旦四個(gè)角的設(shè)置不相同，就會(huì)出現(xiàn)很大的差異。

并非所有瀏覽器，都支持將圓角半徑設(shè)為一個(gè)百分比值。目前最安全的做法，就是將每個(gè)圓角邊框的風(fēng)格和寬度，都設(shè)為一樣的值，并且避免使用百分比值。

Weiter lernen

neue Datei

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style type="text/css"> div { width: 200px; height: 100px; border: 2px solid #f36; border-color: red green blue orange; border-width: 15px 30px 30px 80px; border-radius: 50px; background: #ccc; } </style> </head> <body> <div> </div> </body> </html>

einreichen Code zurücksetzen

Automatische Operation