border-radius 屬性是一個(gè)簡(jiǎn)寫屬性，用于設(shè)置四個(gè) border-*-radius 屬性。該屬性允許為元素添加圓角邊框！

語法：border-radius: 1-4 length|% / 1-4 length|%
／分隔的分別是：水平半徑和垂直半徑
*注釋：每個(gè)半徑的四個(gè)值的順序是：左上角，右上角，右下角，左下角。
如果只設(shè)置三個(gè)值，則意味著第四個(gè)值與第二個(gè)值相同（即左下角與右上角相同）；如果只設(shè)置兩個(gè)值，則意味著第三個(gè)值與第一個(gè)值相同（即右下角與左上角相同）。

當(dāng)我們?yōu)樗膫€(gè)角都設(shè)置為相同的值30px的時(shí)候，可以簡(jiǎn)寫為border-radius:30px

  background-color:#ace;
  width:200px;
  height:200px;
  border-top-left-radius:30px;
  border-top-right-radius:30px;
  border-bottom-right-radius:30px;
  border-bottom-left-radius:30px;

等于

  background-color:#ace;
  width:200px;
  height:200px;
  border-radius:30px;

給四個(gè)角分別設(shè)置不同的半徑值，則可以得到不同的形狀：

圓形

當(dāng)我們給任意一個(gè)正方形設(shè)置足夠大的border-radius就可以把它變成一個(gè)圓形。

background-color:#FFF;
width:200px;
height:200px;
border-radius:100px;

實(shí)際上，如果圓角設(shè)置的長(zhǎng)度值大于100px，仍然可以得到一個(gè)圓形。規(guī)范中指出了其中的原因：

“當(dāng)任意兩個(gè)相鄰圓角的半徑之和超過border-box的尺寸時(shí)，用戶代理必須按比例減小各個(gè)邊框半徑所使用的值，直到它們不會(huì)相互重復(fù)為止?！?/p>

橢圓

border-radius可以單獨(dú)指定水平和垂直半徑，只要用／分隔兩個(gè)值即可。
因此，一個(gè)200px寬 x 100px高的矩形，只要把圓角的兩個(gè)半徑值分別指定為元素寬高的一半，就能得到一個(gè)精準(zhǔn)的橢圓：

background-color:#ace;
width:200px;
height:100px;
border-radius:100px/50px;

自適應(yīng)橢圓

當(dāng)元素的尺寸隨著內(nèi)容的變化而變化時(shí)，我們會(huì)希望圓角也能隨著一起變化，否則的話，這個(gè)橢圓將會(huì)變形。
所以要設(shè)置一個(gè)自適應(yīng)的橢圓，我們需要用到border-radius的百分比值。

這個(gè)百分比值會(huì)基于元素的尺寸進(jìn)行解析，即寬度用于水平半徑的解析，高度用于垂直半徑的解析。這意味著相同的百分比可能會(huì)計(jì)算出不同的水平和垂直半徑。
因此要?jiǎng)?chuàng)建一個(gè)自適應(yīng)的橢圓，可以把這兩個(gè)半徑值都設(shè)置為50%。

即：

border-radius: 50% / 50%;

等同于：

border-radius: 50%;

最終，只需要這一行代碼，就可以得到一個(gè)自適應(yīng)的橢圓或者正圓了。

半圓

利用border-radius屬性可以畫出一個(gè)標(biāo)準(zhǔn)的半圓。

• 首先，它是垂直對(duì)稱的，這意味著 左上角和右上角的半徑值應(yīng)該是相同的；左下角和右下角也應(yīng)該是相同的。
• 頂部邊緣沒有平直的線條，整個(gè)頂部都是曲線。這意味著左上角和右上角的半徑之和等于整個(gè)形狀的寬度。
• 左半徑和右半徑在水平方向上的值均是50%；底部完全沒有圓角，底部的兩個(gè)角的水平圓角值是多少就不重要了，因?yàn)榇藭r(shí)水平圓角總是會(huì)被計(jì)算為0。
• 頂部的兩個(gè)圓角占據(jù)了整個(gè)元素的高度，底部完全沒有圓角，因此，在垂直方向上，合理值應(yīng)該是：100% 100% 0 0 ；

它們的代碼可以簡(jiǎn)寫成：

  background-color:#ace;
  width:200px;
  height:100px;
  border-radius: 50%  / 100% 100% 0 0 

半橢圓
如果此時(shí)畫一個(gè)半橢圓是不是更簡(jiǎn)單了呢？只要元素的高度大于寬度的1/2就好了：

  background-color:#ace;
  width:200px;
  height:150px;
  border-radius: 50%  / 100% 100% 0 0 

那么畫一個(gè)在水平方向上對(duì)稱的半圓也是同樣的道理：

  background-color:#ace;
  width:200px;
  height:150px;
  border-radius: 100% 0 0 100%  / 50%

四分之一圓

要?jiǎng)?chuàng)建一個(gè)十分之一圓，那么其中有一個(gè)角它的水平和垂直半徑值都要是100%，而其他三個(gè)角不能設(shè)置圓角。由于這四個(gè)角它們的水平和垂直半徑值都是相等的，所以不需要寫斜杠和后面的數(shù)值了。

background-color:#ace;
width:200px;
height:150px;
border-radius: 100% 0 0 0

*圓角加上陰影可以寫出很多button的效果。

參考書籍：Lea Verou《CSS揭秘》