本文章轉載於https://www.cnblogs.com/happymental/p/7891725.html

在日常項目過程中，border-radius這個屬性算是非常常用的屬性之一了，通過設置元素的border-radius值，可以輕松給元素設置圓角邊框，甚至實現繪制圓、半圓、四分之一的圓等各種圓角圖形。

　　通常我在使用這個屬性的時候，一般都是用在給div或者button加上一點圓角弧度，顯得好看一點，或者用來畫一個圓形div。用的稍微高級一點的，也就是用來畫了一個右半圓來做為側邊欄的展開/收縮按鈕，記得當時還是剛剛開始學習前端不久，這個半圓怎麽畫還是百度來的，並沒有深入去研究為什麽這麽設置就是這樣一個形狀。

　　後來對border-radius的使用也是平平淡淡，無非就是加個圓角畫個圓。今天寫代碼的過程中，突然對border-radius值的設置好像加深了一點理解，就多研究嘗試了一下，下面整理一下border-radius的使用方法以及我的理解，如果有理解不對的地方，歡迎指正，相互學習。

　　一、border-radius使用

　　border-radius的數值有三種表示方法：px、%、em，對於border-radius的值的設置，我們常用的有三種寫法：

　　（1）僅設置一個值

　　第一種方法，應該是我們最常用的一種情況了，常用來給button加圓角邊框，或者畫一個圓形按鈕，僅需設置一個數值，即可給元素的四個邊角設置統一的圓角弧度，例如：

1 #test1 {
2     border: 3px solid red;
3     height: 100px;
4     width: 200px;
5     border-radius: 30px;
6 }

1 #test2 {
2 　  border: 3px solid red;
3　　 height: 100px;
4 　　width: 100px;
5 　　border-radius: 53px;
6 }

　　（2）設置四個方向的值

　　border-radius屬性其實是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius四個屬性的簡寫模式，因此，border-radius : 30px;，其實等價於border-radius : 30px 30px 30px 30px;（ps：與padding和margin一樣，各個數字之間用空格隔開）。

　　這裏要註意四個數值的書寫順序，不同於padding和margin的“上、右、下、左”的順序，border-radius采用的是左上角、右上角、右下角、左下角的順序，如下圖所示：

　　（3）省略部分值

　　與padding和margin一樣，border-radius同樣可以省略部分值，省略時同樣是采用對角線相等的原則，例如：

1 #test3 {
2     border: 3px solid red;
3     height: 100px;
4     width: 200px;
5     border-radius: 50px 0px;
6 }

　　二、border-radius數值設置及顯示效果的理解

　　（1）使用px表示數值的情況

　　在使用px來表示圓角值的時候，圓角的弧度一般都是一個圓形的部分弧形，具體呈現的顯示效果我是按如下方法與預估和理解的：

　　假設一個長200px，高150px的div對象，設置它的border-radius的值為30px，那麽實際呈現的圓角，其實就是一個以30px為半徑的圓頂格放置在四個邊角後所呈現的弧度，語言表達的可能不夠透徹，看下面的例子應該可以明白。

 1 #test4 {
 2     height: 150px;
 3     width: 200px;
 4     border-radius: 30px;
 5     background-color: cornflowerblue;
 6 }
 7 #circle {
 8     width: 60px;
 9     height: 60px;
10     border-radius: 30px;
11     background-color: chartreuse;
12 }

1 <div id="test4">
2     <div id="circle"></div>
3 </div>

　　這麽去理解以後，下次再需要繪制圓形、各個方向的半圓、四分之一圓的時候，再也不需要去百度或者記住什麽寬和高的比例必須是1比2之類的了，想象一下，大概就能知道比例和數值該怎麽去設置了。哈哈，感覺有點亂，也不知道我描述的內容，除了我自己，你能不能看懂。

　　（2）使用%表示數值的情況

　　使用%來表示圓角值的時候，如果對象的寬和高是一樣的，那判斷方法與第一點一致，只不過想象的時候，需要將寬高乘以百分數換算一下；

　　如果寬高不一致，那產生的效果，其實就是以對象的寬高乘以百分數後得到的值r1和r2，作為兩條半徑繪制出來的橢圓產生的弧度。

1 #test5 {
2     height: 100px;
3     width: 200px;
4     border-radius: 50%;
5     background-color: cornflowerblue;
6 }

　　（3）需要註意的情況

　　在設置對象為圓形的時候，如果使用了border、padding等情況時，對象的實際顯示寬高已經不再是設置的width和height的數值，如果border-radius設置的值仍為原本的width和height的一半，可能達不到預期的真正的圓形的效果。

　　如下面這個例子，給div加了10px的邊框，但是border-radius仍是以100px的一半來設置的，顯示出來的效果顯然就不是一個真正的圓形。

1 #test6 {
2     height: 100px;
3     width: 100px;
4     border-radius: 50px;
5     border: 10px solid #CCCCCC;
6     background-color: cornflowerblue;
7 }

　　可以通過設置百分比50%的方式來解決這一情況，或者計算一下實際的高度再來設置border-radius的數值。上面這個例子，div實際的寬高應該是100 + 10 * 2 = 120px，所以border-radius應該設置為60px。

1 #test7 {
2     height: 100px;
3     width: 100px;
4     border-radius: 60px;
5     border: 10px solid #CCCCCC;
6     background-color: cornflowerblue;
7 }

　　三、border-radius完整結構形式（擴展了解一下，個人感覺好像用不到）

　　在W3C上查border-radius屬性時，會發現上面描述的語法是這樣的：

　　　　　　border-radius: 1-4 length|% / 1-4 length|%;

　　這是什麽意思呢，我也看不懂，後來百度了解到，這是border-radius的完整寫法，我們平時的寫法其實都是簡寫，平時我們寫的border-radius : 50px，其實完整的寫法應該是：

　　　　border-radius : 50px 50px 50px 50px / 50px 50px 50px 50px;

　　“/”前的四個數值表示圓角的水平半徑，後面四個值表示圓角的垂直半徑，什麽是水平半徑和垂直半徑呢，見下圖

　　根據水平半徑和垂直半徑的值，可以形成一個橢圓或者圓形，然後再根據這個去給元素設置圓角的弧度。利用border-radius的完整屬性表達方式，可以設置一些個性的圓角樣式，如下圖（隨便舉個例子）

　　以上，完結。

css3之border-radius