有什么用？
這個radius屬性，可不只是設置圓角，還可以用來畫一些簡單的圖形。
畫個圓形
#demo1 { width:100px; height:100px; background:red; border-radius: 50%; }上述50%就是說設置各邊圓角都為50%。
那么如何畫個半圓？
如下，把寬度設置為高度的兩倍。
#demo2 { width:100px; height:50px; background:green; border-radius: 50px 50px 0 0; }結果。如圖，矩形為100*50 。然后左上角和右上角的圓角分別是50px。因此就是半圓了。
左側半圓
#demo3 { width:50px; height:100px; background: pink; border-radius: 50px 0 0 50px; }
畫半圓了，關鍵是把握住寬度和高度的比例關系，先畫個矩形，然后設置各個方向的圓角就可以了。注意順序是從左上角開始的順時針方向。
1/4圓呢？
#demo4 { width:100px; height:100px; background:gray ; border-radius: 100px 0 0 0; }先畫一個正方形，然后設置任意一個圓角為100%就可以。設置哪個角度是100%哪個角度就是弧線。
PS
css里并沒有直接畫圓的，而是通過圓角實現的，當然你也可以通過canvas來實現。
參考
2．半圓圖解CSS3：核心技術與案例實戰
新聞熱點
疑難解答
