域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過(guò)

這篇文章主要介紹了CSS3 border-radius圓角的實(shí)現(xiàn)方法及用法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

以前想實(shí)現(xiàn)一個(gè)圓角是比較麻煩的，不過(guò)現(xiàn)在CSS3來(lái)了，實(shí)現(xiàn)圓角變的那么的簡(jiǎn)單只需要一句話(huà)：border-radius即可。下面青島星網(wǎng)跟大家分享下：border-radius的具體用法。

CSS3圓角只需設(shè)置一個(gè)屬性：border-radius（含義是"邊框半徑"）。你為這個(gè)屬性提供一個(gè)值，就能同時(shí)設(shè)置四個(gè)圓角的半徑。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。

border-radius的瀏覽器支持

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ì)失效。）

另外，早期版本Firefox的單個(gè)圓角的語(yǔ)句，與標(biāo)準(zhǔn)語(yǔ)法略有不同。

-moz-border-radius-topleft（標(biāo)準(zhǔn)語(yǔ)法：border-top-left-radius）

-moz-border-radius-topright（標(biāo)準(zhǔn)語(yǔ)法：border-top-right-radius）

-moz-border-radius-bottomleft（標(biāo)準(zhǔn)語(yǔ)法：border-bottom-left-radius）

-moz-border-radius-bottomright（標(biāo)準(zhǔn)語(yǔ)法：border-bottom-right-radius）

border-radius的實(shí)例制作

#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;
}

CSS3 border-radius - 指定每個(gè)圓角

如果你在 border-radius 屬性中只指定一個(gè)值，那么將生成 4 個(gè) 圓角。

但是，如果你要在四個(gè)角上一一指定，可以使用以下規(guī)則：

四個(gè)值: 第一個(gè)值為左上角，第二個(gè)值為右上角，第三個(gè)值為右下角，第四個(gè)值為左下角。

三個(gè)值: 第一個(gè)值為左上角, 第二個(gè)值為右上角和左下角，第三個(gè)值為右下角

兩個(gè)值: 第一個(gè)值為左上角與右下角，第二個(gè)值為右上角與左下角

一個(gè)值： 四個(gè)圓角值相同

CSS3 border-radius單個(gè)圓角的設(shè)置

單個(gè)圓角的設(shè)置除了同時(shí)設(shè)置四個(gè)圓角以外，還可以單獨(dú)對(duì)每個(gè)角進(jìn)行設(shè)置。對(duì)應(yīng)四個(gè)角，CSS3提供四個(gè)單獨(dú)的屬性：

border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-bottom-left-radius

文章來(lái)源：腳本之家，原文鏈接：https://www.jb51.net/css/744998.html

申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！