border-radius 圓角

如果想要把元素邊界變得圓潤，不妨試試這個屬性。

1. 官方定義

通過 CSS3，您能夠創(chuàng)建圓角邊框并且不需使用設(shè)計(jì)軟件，比如 PhotoShop。

2. 慕課解釋

通過給一個 html 元素標(biāo)簽的樣式增加一條 border-radius 屬性，讓這個元素的邊角由直角邊變成圓弧。

3. 語法

它的用法遵循 css 通用的：左上、 右上 、右下 、左下 的原則。

border-radius:value;

包含參數(shù)

1. 只有一個參數(shù)時：

border-radius:value;

value 代表給這個元素 4 個方向增加一個的圓弧值。

2. 只有兩個參數(shù)時，中間用空格分開：

border-radius:value1 value2;

value1 代表 左上、右下，value2 代表 右上、左下角圓弧值。

3. 只有三個參數(shù)時，中間用空格分開：

border-radius:value1 value2 value3;

value1 代表左上 value2 代表 右上 左下 value3 代表右下
4. 有四個參數(shù)時，中間用空格分開

border-radius:value1 value2 value3 value3;

value1 ~ value4 分別代表左上、 右上 、右下 、左下四個角的圓弧值

4. 兼容性

5. 示例

1. 給 demo 增加右上和左下的圓角

<div class="demo"></div>

可以這樣

.demo{   
    border-radius:0  8px 0 8px;  
}

推薦第一種寫法，但是也可以這樣

.demo{   
    border-top-right-radius:8px;  
    border-bottom-left-radius:8px;
}

效果圖

2. 制作一個帶有圓角的卡片

<div class="card">
    <div class="text">
        demo1
    </div>
</div>

.card{
    background: red;
    width: 100px;
    height: 200px;
    line-height: 200px;    
    text-align: center;
    border-radius: 6px;
}
.text{
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    background: #fff;
    border-radius: 50%;
}

效果圖

3. 給一個 table 增加圓角左上和右上是 8px 右下和左下是直角

<table>
    <tr>
        <td>姓名</td><td>年齡</td>
    </tr>
    <tr>
        <td>demo</td><td>19</td>
    </tr>
</table>

table{   
    background: red;
    border-radius: 8px 8px 0 0;      
    font-size: 18px;
    color: #fff;
    border-collapse: collapse;
    overflow: hidden;
}

6. 經(jīng)驗(yàn)分享

1. border-radius：50% 會讓一個寬度和高度相等的塊級元素變成一個圓。

.demo{
    width:100px;
    height:100px;
    border-radius：50%
}

設(shè)置 50% 的好處就是不用再去計(jì)算他的寬高，例如上面這個例子 border-radius:50px同樣可以讓這個元素變成一個圓。
2. 如果圓角過大，記得要設(shè)定 padding ，這樣可以避免里面的內(nèi)容超出元素。

7. 小結(jié)

1. 不要讓 border-radius 的 % 值大于 50，因?yàn)槿绻麅蓚€相鄰的半徑和超過了對應(yīng)的盒子的邊的長度，那么瀏覽器要重新計(jì)算以保證它們不重合。雖然表面上看沒有問題但是這樣會對性能有影響。
2. 如果用 rem、em 單位在移動端用border-radius 畫圓，在部分機(jī)型里面是橢圓的問題，可以通過 50% 來解決 ，或者使用 px 配合縮放 scale 來實(shí)現(xiàn) rem 單位的效果。
3. 在內(nèi)聯(lián)元素span這類標(biāo)簽使用這個屬性的時候同樣有效但是記得不要使用%這樣會導(dǎo)致一些span 標(biāo)簽的圓角不一樣因?yàn)?% 是參考長和寬計(jì)算的。
4. border-radius 圓角并不會隱藏標(biāo)簽內(nèi)部元素的內(nèi)容，如果有內(nèi)容溢出的情況記得增加overflow:hidden;
5. 任何元素都可以使用這個屬性,包括視頻、音頻標(biāo)簽等等。
6. 一般情況下不推薦 border-top-left-radius 這類的寫法除非是需要在某種交互過程中需要改變其中一個的圓角值而其它的保持不變。因?yàn)檫@類的標(biāo)簽會影響瀏覽器渲染的性能。