border-radius屬性的應用，大家最熟悉的應該就是頭像了，但其實，border-radius屬性還是很強大的，你能相信，下面兩個圖形都是用border-radius畫出來的麼？
下面是我結合網上大佬們的部落格資料以及自己的實踐結果得出來的一些結論，有什麼不對的望各位大神們批評指出，謝謝~
我們經常用下面的這種方式畫圓.radius-test1
效果圖：
這個50%是誰的50%，這個圓是怎麼畫出來的呢？下面驗證一下：
注：其實border-radius值的寫法可以是八個、三個，也可以是單值，理解起來有些困難，大家可以參考
下面的是我對單值的理解版本（因為畫圓只需要單值不需要那麼複雜）
"test radius-test1">
"test radius-test2">
.test
.radius-test1
.radius-test2
radius-test2代表的是radius-test1還沒有被圓化前的正方形，可以看出來黑色的圓是正方形的內接圓，圓的半徑是正方形邊長的一半，也就是100px的50%，如果border-radius=0，就是乙個正方形，沒有變化。但是我覺得其中還是出現了乙個圓——正方形的外接圓。
因為我們規定了div是長寬100px，所以就只會顯示黑色的正方體。如果border-radius=20%呢？
這個時候已經是圓角矩形了，是通過下面的這種方式截出來的：
去掉外面黑色的四個小角，剩餘的黑色就會出現在顯示屏上。如果我們把值設為50%~無窮大，會發現是沒有變化的，都是50%值的樣子。
總結：
border-radius屬性的百分比，在沒有設定border的情況下，是相對於邊長。
當值為50%時，會以正方形兩條對角線的交點為圓心，畫乙個半徑為邊長50%的圓（內接圓）
當值為0時，會以正方形兩條對角線的交點為圓心，畫乙個半徑為對角線一半長的圓（外接圓）
我猜想border-radius屬性設定了最大圓和最小圓，對應為外接圓和內接圓，只會在這兩個同心圓之間做切割
（忽視這個又醜又不標準的圖，理解內容就好^_^）
圓的半徑範圍就是紅色的那一段+邊長的一半，紅色的部分根據border-radius取值，然後畫圓做切割。
理解了上面的，就好理解長方形畫橢圓了。
其實我這裡有個疑問，在給正方形設定了border屬性之後，border-radius的值對於內外正方形的影響程度剛開始不一樣，但是到50%的時候又相同了。等待以後看到相關資料再來解答。
border-radius的八值寫法：
border-radius: 左上角水平圓角半徑大小 右上角水平圓角半徑大小 右下角水平圓角半徑大小 左下角水平圓角半徑大小/左上角垂直圓角半徑大小 右上角垂直圓角半徑大小 右下角垂直圓角半徑大小 左下角垂直圓角半徑大小;
border-radius: 300px 300px 300px 300px/300px 300px 300px 300px;
border-radius: 左上角水平垂直圓角半徑大小 右上角和左下角水平垂直圓角半徑大小 左下角水平垂直圓角半徑大小
border-radius: 300px 300px 300px;
border-radius的四值寫法：
舉例畫半圓：
.semi-circle
CSS3的border radius屬性詳解
除了上述的簡寫外，還可以和border一樣，分別寫四個角，如下 border top left radius 左上角 border top right radius 右上角 border bottom right radius 右下角 border bottom left radius 左下角 分別...
border radius屬性詳解
在平時工作中border radius這個屬性，一直拷貝的ui的設計值，用的最多的也是border radius 50 這個屬性。竟然一直沒去深入了解過其特性。border radius 300px 300px 300px 300px 300px 300px 300px 300px 其中分別對應 左...
border radius屬性值引數詳解
border radius是css3設定圓角的乙個屬性，其屬性值得單位可以使用 em px 百分比等等。但是，border radius屬性值得引數形式有好多種，那麼具體都代表什麼意思呢？下面以實際例子分析一下 首先是最常見的一種形式，乙個值 border radius 值 這段 代表同時將元素的每...