一、定義

CSS 屬性?border-radius?允許你設(shè)置元素的外邊框圓角。當(dāng)使用一個半徑時確定一個圓形，當(dāng)使用兩個半徑時確定一個橢圓。這個（橢）圓與邊框的交集形成圓角效果。

該屬性是一個 簡寫屬性，是為了將這四個屬性?border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和?border-bottom-left-radius?簡寫為一個屬性。

border-top-left-radius?用來設(shè)置元素左上角的圓角效果。這段圓?。ń牵┛梢允菆A或橢圓的一部分。如果其中有一個值為 0，那么將無圓角效果（見?border-top-left-radius?取值方式)。剩余三個相似。

即使元素沒有邊框，圓角也可以用到?background?上面，具體效果受?background-clip?影響。

當(dāng)?border-collapse?的值為?collapse?時，border-radius?屬性不會被應(yīng)用到表格元素上。

二、border-radius及其子屬性的語法和值

1. 語法：

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

border-top-left-radius: length|% [length|%];

2. 值：

• length：定義圓形半徑或橢圓的半長軸，半短軸（或水平半徑，垂直半徑）。負值無效。
• percentage：使用百分數(shù)定義圓形半徑或橢圓的半長軸，半短軸（或水平半徑，垂直半徑）。水平半徑相對于盒模型的寬度；垂直半徑相對于盒模型的高度。負值無效。

注意：

• border-top-left--radius屬性的兩個長度或百分比值定義了橢圓的四分之一外邊框的邊緣角落的形狀。第一個值是水平半徑，第二個是垂直半徑。如果省略第二個值，它是從第一個值復(fù)制。如果任一長度為零，角落里是方的，不圓潤。
• 每種半徑（水平半徑或垂直半徑）的四個值的順序是：左上角，右上角，右下角，左下角。如果省略左下角，則與右上角是相同的。如果省略右下角，則與左上角是相同的。如果省略右上角，則與左上角是相同的。
• 當(dāng)四個角為圓角的時，水平半徑和垂直半徑相等?？梢院唽憺閎order-radius：1-4 length?|?％

3. 舉例：

例一：

border-radius: 1em/5em;

按照上述注意事項的第2條可知，
border-radius: 1em/5em;
全寫為 border-radius: 1em 1em 1em 1em/5em 5em 5em 5em;

/* 等價于： */

border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;

------分割線-------

border-radius: 4px 3px 6px / 2px 4px;

同樣，
border-radius: 4px 3px 6px / 2px 4px;
全寫為 border-radius: 4px 3px 6px 3px/ 2px 4px 2px 4px;
/* 等價于： */

border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

注意：中間的 “/” 用于分隔四個角的水平半徑和垂直半徑

例二：

      p {
            background-color: aquamarine;
            width: 160px;
            height: 160px;
            border-radius: 50% 30% 30% 50%;
        }

其中，border-radius的值按順序，50%表示左上角的圓角所屬圓的水平半徑和垂直半徑各占盒子的寬和高50%；30%表示右上角的圓角所屬圓的水平半徑和垂直半徑各占盒子的寬和高30%，以此類推。

參考MDN和菜鳥教程總結(jié)一番。文章來源地址http://www.zghlxwxcb.cn/news/detail-470744.html

到了這里，關(guān)于border-radius（使用詳解）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！