css之border-radius

 

css3之border-radius理解

 

 

 

　　在平常項目過程當中，border-radius這個屬性算是很是經常使用的屬性之一了，經過設置元素的border-radius值，能夠輕鬆給元素設置圓角邊框，甚至實現繪製圓、半圓、四分之一的圓等各類圓角圖形。

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

　　

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

　　1、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 }

 

 

 　　2、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 }

 

 

 　　3、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的完整屬性表達方式，能夠設置一些個性的圓角樣式，以下圖（隨便舉個例子）

　　以上，完結。

 ---------------------
做者：

吃火雞的饅頭