border-radius 圓角

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

1. 官方定義

通過 CSS3，您能夠創建圓角邊框并且不需使用設計軟件，比如 PhotoShop。

2. 慕課解釋

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

3. 語法

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

border-radius:value;

包含參數

1. 只有一個參數時：

border-radius:value;

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

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

border-radius:value1 value2;

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

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

border-radius:value1 value2 value3;

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

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. 經驗分享

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

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

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

7. 小結

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