轉：http://www.kuqin.com/shuoit/20141014/342620.html
border-radius:50%
今天來聊聊這個border-radius屬性，radius的英文意思是弧度的意思，而國人更喜歡稱之為圓角，因為它可以使得我們的邊框有棱有角。當年前輩們都是用圖片君搞定圓角的年代或用一條條邊框構造的年代已經一去不復返，而移動互聯網的高速發展為border-radius屬性的飛速發展，so今天就來聊聊圓角邊框。雖然英文翻譯過來叫做半徑弧度，但是為了能讓大家更加熟悉，下文統一使用圓角半徑來代替。
相關介紹
這個borde-radius屬性其實也是一個簡寫值，它分別是 border-top-left-radius（左上圓角半徑）, border-top-right-radius（右上圓角半徑）, border-bottom-right-radius （右下圓角半徑）,border-bottom-left-radius（左下圓角半徑），如下圖所示：
說到半徑，我突然想起來了以前數學中學過關於圓跟半徑的關系，百科如下：
在圓中，連接圓心和圓上任意一點的線段叫做圓的半徑。通常用字母r來表示。
在球中，連接球心和球面上任意一點的線段叫做球的半徑。
正多邊形所在的外接圓的半徑叫做圓內接正多邊形的半徑。
css中的radius多少也跟圓扯上關系，不過要分橢圓還是圓，因為css中分了垂直半徑和水平半徑。而幾何中的圓只要確定了半徑就可以畫出一個圓出來。css中圓角，當使用一個值時，確定為圓角；當使用兩個值時，確定一個橢圓圓角，但是不管是圓角還是橢圓角其實都有點像是背景和設置這個圓角半徑的重疊產生的，瀏覽器會去除他們的沒有交集的部分，留下有交集的部分，像CDR里面兩個有交集的圖形使用的相交。
可能一開始很難了解，不妨往下看吧。
說完了大概的東東，那么問題來了，圓角邊框具體值有哪些，莫急少年，上w3c找碼去。
對於border-radius，w3c的解釋在右側：
border-*-radius
| 屬性名: | border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius |
|---|---|
| 屬性值: | [ <length> | <percentage> ]{1,2} |
| 初始值: | 0 |
| 應用於: | 除表單元格邊框為collapse的所有元素 |
| 繼承性: | 無 |
| 百分比: | 根據盒子邊框border-box的寬度. |
| 計算值: | 兩個長度，分別 <length> 或 percentages |
w3c屬性值詳解：
[ <length> | <percentage> ]：必須出現一個值，可長度可百分比，比如：border-top-left-radius:5px,border-top-left-radius:5px 50%都是可行
{1,2}： 表示他們的值最小可以重復一次，最大可重復兩次。假如只有一個值，表示圓角，那么它的水平距離和垂直距離相等，即第二個值復制第一個值；假如是兩個值，那么確定一個橢圓角，第一個值橢圓的水平半徑，第二值為橢圓的垂直半徑，說起來有點拗口，直接上圖：
只有1個值，如：border-top-left-radius:50px，表示半徑為50px圓，如圖：
標注錯誤了，盒子尺寸為：300*100
假如有兩個值，如：border-top-left-radius:50px 100px，表示水平半徑為50px，垂直半徑為100px的橢圓，如圖：
同理 border-top-right-radius（右上圓角半徑）, border-bottom-right-radius （右下圓角半徑）,border-bottom-left-radius（左下圓角半徑），也是如此。你只要記住當某個角為一個值時，確定是一個圓，當使用兩個值確定一個橢圓。
你可以輕戳右側的demo：左上角為圓角和橢圓角demo
手機黨↓
了解4個角的工作原理，那么是是時候來了解一下全局圓角的屬性值了。
| 屬性名: | border-radius |
|---|---|
| 屬性值: | [<length>|<percentage>]{1,4} [ / [<length>|<percentage>]{1,4} ]? |
| 初始值: | 詳情看下表各單元值 |
| 應用於: | 除表單元格邊框為collapse的所有元素 |
| 繼承性: | 無 |
| 百分比: | 根據盒子邊框border-box的寬度. |
| 計算值: | 詳情看下表各單元值 |
w3c屬性值詳解
1、[<length>|<percentage>]：表示圓角的半徑長度，必須出現其中一個值。
2、{1,4}：前面的長度值或者百分比，最小重復一次，最大可重復4次，如：border-radius:5pxborder-radius:5px 10pxborder-radius:5px 10px 15pxborder-radius:5px 10px 15px 20px
3、[ / [<length>|<percentage>]{1,4} ]：表示假如想要出現中括號包含的值，那么要用 / 來連接起來，比如:border-radius:5px 10px 15px 20px / 5px 10px 15px 20px其實后面這4個值就是控制其垂直半徑，規定圓角是橢圓角還是圓形角。
4、?：表示前面的被中括號[]包圍的這一串數字是可選的，可出現可不出現。
以下沒有特別說明，盒子的尺寸200*100，邊框寬度1px，放大200%下所見。
1個值：border-radius:5px，那么左上角、右上角、右下角、左下角的圓角半徑為5px的圓。即，值復制，第二、第三、第四個值都是復制第一個值。
2個值：border-radius:5px 10px，那么左上和右下角、右上和左下角圓的半徑相同，即第三個復制第一個，第四個復制第二個的值。
3個值：border-radius:5px 10px 15px，那么左上角半徑為5px的圓，右上角和左下角半徑為10px的圓，右下角半徑為15px的圓，即第四個復制第二個的值。
4個值：border-radius:5px 10px 15px 20px，那么左上角半徑為5px的圓，右上角半徑為10px的圓，右下角半徑為15px的圓，左下角半徑為20的圓，這里的值沒有復制。
你可以輕戳右側的demo：4種數值的圓角demo
其實提到值復制，之前我專門將到了margin和padding這兩個屬性的簡寫值含義，其實看見css語法中有{1,4}就說明，假如某個值缺省，那么它就會復制另外一個值來作為自己的值，傳送門：分析margin和padding簡寫值
剛剛前面第3點已經提到了，斜扛 “/” 符號后面的4個值可選，假如要選，那么必須用斜扛符號”/”來分隔開來，斜扛符號后面的值確定一個橢圓的垂直半徑，假如border-radius:5px / 5px 10px 15px 20px說明四個角的垂直半徑分別為5px，10px，15px，20px。跟上面的一樣，這4個垂直半徑值對應的角是依次分別是 border-top-left-radius（左上圓角垂直半徑）, border-top-right-radius（右上圓角垂直半徑）, border-bottom-right-radius （右下圓角垂直半徑）,border-bottom-left-radius（左下圓角垂直半徑）
1個值：border-radius:5px/5px，那么其水平半徑和垂直半徑相等，故為圓，如圖
2個值：border-radius:5px/5px 10px，那么其左上角和右下角水平半徑和垂直半徑為5px的圓，右上角和左下角水平半徑為5px，垂直半徑為10px的橢圓，如圖
3個值：border-radius:5px/5px 10px 15px，那么其左上角半徑為5px的圓，右上角和左下角水平半徑為5px，垂直半徑為10px的橢圓，右下角水平半徑為5px，垂直半徑為15px的橢圓，如圖
4個值：border-radius:5px/5px 10px 15px 20px，那么其左上角半徑為5px的圓，右上角水平半徑為5px，垂直半徑為10px的橢圓，右下角水平半徑為5px，垂直半徑為15px的橢圓故為圓，左下角水平半徑為5px，垂直半徑為20px的橢圓，如圖
你可以輕戳右側的demo：4種不同數值的橢圓角demo
手機黨↓
圖解
剛剛在最開始的時候我們提到過交集，我個人是這么認為的，對於這個radius屬性，其實是原有的盒子跟這“看不見”的圓或者橢圓相互結合后的產品，所以我是這么理解這個渲染過程：
.br5{ width:300px;height:200px;background: #F8D575;border-radius:50px;} //css代碼
1、先渲染盒子模型，這里為300*200px
2、再渲染border-radius屬性，因為這里使用了border-radius:50px，其實這里已經包含了四個角，分別是左上角、右上角、右下角和左下角
對應的位置如下圖所示
我們把盒子和看不見的圓形放一起看看
接着盒子最外邊框與圓形的交集應該是下面這部分
3、瀏覽器保留盒子內部結構的同時，只保留盒子與“看不見”的圓形相互交集部分，故四個90°的角被圓角所覆蓋，但是盒子模型依然起作用。
4、當然對於那四個圓角我們用肉眼是看不見的，瀏覽器也不會傻乎乎的表現出來，所以最后呈現在我們前面的應該是如下圖：
以上是經過w3c研究得出，畢竟英文你懂的，假如你有任何的見解請下下面評論中提出。
說到這里是否以為就告一段落了呢？想睡覺了都。。。
說說重疊
什么時候重疊，重疊之后會是怎樣子？這個重疊有點兒意思哈，這就是構造我們純圓形的原理
重疊分三種情況：
1、左上角和右上角重疊，當寬度 < 圓角半徑*2時出現，代碼：.demo{width:50px;height:100px;border-radius:50px;}
2、左上角和左下角重疊，當寬度 > 圓角半徑*2時出現，代碼：.demo{width:200px;height:100px;border-radius:50px;}
3、四個角重疊，當寬度 = 高度 = 圓角半徑*2時，那么這個時候，四個角會重疊在一起，構成了圓形.demo{width:100px;height:100px;border-radius:50px;}
重疊后的半徑計算
如下兩個代碼片段
box-sizing: border-box; width: 6em; height: 2.5em; border-radius: 0.5em 2em 0.5em 2em; box-sizing: border-box; width: 6em; height: 2em; border-radius: 0.5em 2em 0.5em 2em
第一個片段，height（2.5em）高度恰好可以包含兩個相鄰半徑之和(0.5em + 2em)，那么此時四個角半徑正好分別是 0.5em 2em 0.5em 2em。但是假如高度只有2em時，高度容納不了半徑為0.5em + 2em的圓（2.5em），因此他們只能減小到高度（2em）恰好能容納這兩個圓為止，也就是2em，所以對應的左上角和右下角減小到0.4em，右上角和左下角減小到1.6em，此時正好等於高度（2em）。
即2em/0.5em + 2em=0.8，每個角都是按照這個比例縮小0.8，所以得出的半徑為：border-radius: 0.4em 1.6em 0.4em 1.6em，而不是之前的border-radius: 0.5em 2em 0.5em 2em
應用
既然學了這個圓角屬性，那么就來做一個demo吧，於是在網上找了opera瀏覽器的logo，這個分析起來不難，就只有兩個圖層，一個是最底部的橢圓，一個是最上面那層的橢圓。
原始圖
最終效果圖
1、先確定一下最底層的橢圓寬高，量了一下，水平寬度為258px，垂直高度為275px，因為其是一個對稱的橢圓，沒有傾斜度，故4個角均為水平半徑為258px，垂直半徑為275px的4個相等橢圓，代碼如下
.opera{border-radius:258px 258px 258px 258px /275px 275px 275px 275px}
2、用同樣的辦法確定最里面的橢圓的半徑，因此，四個角均為水平半徑120px，垂直半徑為229px的橢圓
.opera-top{border-radius:112px 112px 112px 112px/231px 231px 231px 231px;}
完整代碼如下
.opera{
width:258px;
height:275px;
background-color:#f22629;
border-radius:258px/275px;
position:relative;
z-index:1;
}
.opera-top{
width:112px;
height:231px;
background-color:#fff;
border-radius:112px/231px;
position:absolute;
left:73px;
top:23px;
z-index:2;
}