一、border-radius使用
border-radius的數值有三種表示方法：px、%、em，對於border-radius的值的設定，我們常用的有三種寫法：
（1）僅設定乙個值
第一種方法，應該是我們最常用的一種情況了，常用來給button加圓角邊框，或者畫乙個圓形按鈕，僅需設定乙個數值，即可給元素的四個邊角設定統一的圓角弧度，例如：
（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同樣可以省略部分值，省略時同樣是採用對角線相等的原則，例如：
二、border-radius數值設定及顯示效果的理解
（1）使用px表示數值的情況
在使用px來表示圓角值的時候，圓角的弧度一般都是乙個圓形的部分弧形，具體呈現的顯示效果我是按如下方法與預估和理解的：
假設乙個長200px，高150px的div物件，設定它的border-radius的值為30px，那麼實際呈現的圓角，其實就是乙個以30px為半徑的圓頂格放置在四個邊角後所呈現的弧度，語言表達的可能不夠透徹，看下面的例子應該可以明白。
（2）使用%表示數值的情況
使用%來表示圓角值的時候，如果物件的寬和高是一樣的，那判斷方法與第一點一致，只不過想象的時候，需要將寬高乘以百分數換算一下；
如果寬高不一致，那產生的效果，其實就是以物件的寬高乘以百分數後得到的值r1和r2，作為兩條半徑繪製出來的橢圓產生的弧度。
（3）需要注意的情況
在設定物件為圓形的時候，如果使用了border、padding等情況時，物件的實際顯示寬高已經不再是設定的width和height的數值，如果border-radius設定的值仍為原本的width和height的一半，可能達不到預期的真正的圓形的效果。
如下面這個例子，給div加了10px的邊框，但是border-radius仍是以100px的一半來設定的，顯示出來的效果顯然就不是乙個真正的圓形。
可以通過設定百分比50%的方式來解決這一情況，或者計算一下實際的高度再來設定border-radius的數值。上面這個例子，div實際的寬高應該是100 + 10 * 2 = 120px，所以border-radius應該設定為60px。
三、border-radius完整結構形式（擴充套件了解一下，個人感覺好像用不到）
在w3c上查border-radius屬性時，會發現上面描述的語法是這樣的：
border-radius : 50px 50px 50px 50px / 50px 50px 50px 50px;
「/」前的四個數值表示圓角的水平半徑，後面四個值表示圓角的垂直半徑，什麼是水平半徑和垂直半徑呢，見下圖
根據水平半徑和垂直半徑的值，可以形成乙個橢圓或者圓形，然後再根據這個去給元素設定圓角的弧度。利用border-radius的完整屬性表達方式，可以設定一些個性的圓角樣式，如下圖（隨便舉個例子）
如何不用border radius 寫圓角邊框
html 上面的圓角邊框 下面的圓角邊框 css樣式 xtop,xbottom xb1,xb2,xb3,xb4 xb1,xb2,xb3 xb2,xb3,xb4 xb1 xb2 xb3 xb4 xboxcon 解說 首先，他的圓角實現並不是真的圓角，而是由4個b標籤堆積起來的，每個b標籤都是高度為1p...
borderRadius的計算縮寫理解
border radius是我們實現圓角的方法之一 ie8以下不支援，相容的話建議上層定位一張圓角 不過圓角這個屬性也有自己的縮寫計算方式，很多人看到 border radius 20px 20px 20px 30px 這樣的 就不知道圓角效果是什麼樣的，今天說一下我自己的理解 自動補全法。bord...
border radius 圓角半徑
相關屬性 border top right radius border bottom right radius border bottom left radius border top left radius 由浮點數字和單位識別符號組成的長度值。不可為負值。border top left radi...