border-radius 圓角

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

1. 官方定義

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

2. 解釋

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

3. 語法

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

border-radius:value;

包含參數(shù)

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

border-radius:value;

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

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

border-radius:value1 value2;

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

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

border-radius:value1 value2 value3;

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

border-radius:value1 value2 value3 value3;

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

4. 兼容性

5. 示例

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

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

可以這樣

.demo{   
    border-radius:  px  px;  
}

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

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

效果圖

2. 制作一個(gè)帶有圓角的卡片

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

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

效果圖

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

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

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

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

1. border-radius：50% 會(huì)讓一個(gè)寬度和高度相等的塊級(jí)元素變成一個(gè)圓。

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

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

7. 小結(jié)

1. 不要讓 border-radius 的 % 值大于 50，因?yàn)槿绻麅蓚�(gè)相鄰的半徑和超過了對(duì)應(yīng)的盒子的邊的長度，那么瀏覽器要重新計(jì)算以保證它們不重合。雖然表面上看沒有問題但是這樣會(huì)對(duì)性能有影響。

2. 如果用 rem、em 單位在移動(dòng)端用border-radius 畫圓，在部分機(jī)型里面是橢圓的問題，可以通過 50% 來解決 ，或者使用 px 配合縮放 scale 來實(shí)現(xiàn) rem 單位的效果。

3. 在內(nèi)聯(lián)元素span這類標(biāo)簽使用這個(gè)屬性的時(shí)候同樣有效但是記得不要使用%這樣會(huì)導(dǎo)致一些span 標(biāo)簽的圓角不一樣因?yàn)?nbsp;% 是參考長和寬計(jì)算的。

4. border-radius 圓角并不會(huì)隱藏標(biāo)簽內(nèi)部元素的內(nèi)容，如果有內(nèi)容溢出的情況記得增加overflow:hidden;

5. 任何元素都可以使用這個(gè)屬性,包括視頻、音頻標(biāo)簽等等。

6. 一般情況下不推薦 border-top-left-radius 這類的寫法除非是需要在某種交互過程中需要改變其中一個(gè)的圓角值而其它的保持不變。因?yàn)檫@類的標(biāo)簽會(huì)影響瀏覽器渲染的性能。