本篇內(nèi)容介紹了“css3中實(shí)現(xiàn)圓角的屬性是哪個(gè)”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),綿陽企業(yè)網(wǎng)站建設(shè),綿陽品牌網(wǎng)站建設(shè),網(wǎng)站定制,綿陽網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,綿陽網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

css3中實(shí)現(xiàn)圓角的是“border-radius”屬性，使用該屬性可以給任何元素制作“圓角”；其語法是“border-radius: 1-4 length|% / 1-4 length|%;”，需要按此順序設(shè)置每個(gè)radii的四個(gè)值，如果省略bottom-left，則與top-right相同，如果省略bottom-right，則與top-left相同。

使用 CSS3 border-radius 屬性，你可以給任何元素制作 "圓角"。

語法

border-radius: 1-4 length|% / 1-4 length|%;

注釋：按此順序設(shè)置每個(gè) radii 的四個(gè)值。如果省略 bottom-left，則與 top-right 相同。如果省略 bottom-right，則與 top-left 相同。如果省略 top-right，則與 top-left 相同。

值length：定義圓角的形狀；  %：以百分比定義圓角的形狀。

CSS3 border-radius 屬性

使用 CSS3 border-radius 屬性，你可以給任何元素制作 "圓角"。

以下為三個(gè)實(shí)例：

代碼如下:

實(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è)圓角值相同

以下為三個(gè)實(shí)例:

以下為源代碼:

實(shí)例

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

“css3中實(shí)現(xiàn)圓角的屬性是哪個(gè)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！