border-radius 不但可以定義圓半徑和圓角大小，還可以畫出各種方向的半圓。 ...
在css2中，如果需要失效一些圓角或者半圓等等效果，一般是要通過ps等軟體來處理的，在CSS3中，則不需要了，只需要通過border-radius就可以實現，大大方便了開發的效率。
無論圓角、圓弧、實心圓、半圓，css3的實現代碼都是 border-radius 屬性，border-radius 不但可以定義圓半徑和圓角大小，還可以畫出各種方向的半圓。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>CSS3</title> 7 <style> 8 *{margin:0;padding:0;} 9 ul li{list-style:none;float:left;margin-left:20px;margin-top:50px;text-align:center;} 10 li{background:red;} 11 .circle1{width:100px;height:50px;border-radius:50px 50px 0 0;line-height:50px;} 12 .circle3{width:100px;height:50px;border-radius:0 0 50px 50px;line-height:50px;} 13 .circle2{width:50px;height:100px;border-radius:0 50px 50px 0;line-height:100px;} 14 .circle4{width:50px;height:100px;border-radius: 50px 0 0 50px;line-height:100px;} 15 .circle5{width:100px;height:100px;border-radius: 50px;line-height:100px;} 16 </style> 17 </head> 18 <body> 19 <ul> 20 <li class="circle1">上邊圓</li> 21 <li class="circle2">左邊圓</li> 22 <li class="circle3">下邊圓</li> 23 <li class="circle4">左邊圓</li> 24 <li class="circle5">全圓</li> 25 </ul> 26 </body> 27 </html>
效果如下：
