使用css3實現(xiàn)圓角效果的優(yōu)點

1. 減少網(wǎng)站維護工作量。

2. 提高了網(wǎng)站的性能，少了對圖片的 HTTP 的請求，網(wǎng)頁載入速度將變快。

3. 增加視覺美觀性。

使用css3實現(xiàn)圓角效果的原理

我們需要使用css3中的border-radius屬性，那么今天我們將帶大家詳細了解一下border-radius屬性。

border-radius屬性

1. 含義: border-radius屬性簡寫屬性為元素添加圓角邊框.

2. 語法：border-radius: 1-4 length|% / 1-4 length|%;

3. 瀏覽器兼容性：IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 屬性。

使用css3實現(xiàn)圓角效果的代碼

實例一：指定背景顏色的元素圓角

#rcorners1 {
    border-radius: 25px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners2 {
    border-radius: 25px;
    border: 2px solid #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

實例效果如圖所示

實例二：指定特定的元素圓角

#rcorners4 {
    border-radius: 15px 50px 30px 5px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners5 {
    border-radius: 15px 50px 30px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners6 {
    border-radius: 15px 50px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

實例效果如圖所示

總結(jié)

屬性的兩個長度第一個值是水平半徑，第二個是垂直半徑。如果省略第二個值，它是從第一個復(fù)制。如果任一長度為零，角落里是方的，不圓潤。border-radius屬性還可以制作橢圓，我們將在后面的文章向大家介紹。

以上就是如何使用css3實現(xiàn)圓角效果（附實例代碼）的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！