css3畫半圓

border-radius製做半圓與製做圓形的方法是同樣的，只是元素的寬度與圓角方位要配合一致，不一樣的寬度和高度比例，以及圓角方位，能夠製做上半圓、下半圓、左半圓和右半圓效果。例如：
.semicircle {
     
      margin: 30px;
    }
    .top {
      width: 100px;/*寬度爲高度的2倍*/
      height: 50px;
      border-radius: 50px 50px 0 0;/*圓角半徑爲高度的值*/
    }
    .right {
      height: 100px;/*高度爲寬度的2倍*/
      width: 50px;
      border-radius: 0 50px 50px 0;/*圓角半徑爲寬度的值*/
    }
    .bottom {
      width: 100px;/*寬度爲高度的2倍*/
      height: 50px;
      border-radius: 0 0 50px 50px;/*圓角半徑爲高度的值*/
    }
    .left {
      width: 50px;
      height: 100px;/*高度爲寬度的2倍*/
      border-radius: 50px 0 0 50px;/*圓角半徑爲寬度的值*/
    }

效果如圖3-35所示。

 

border-radius製做半圓有兩個小技巧：

製做上半圓或下半圓，元素的寬度值是高度值的2倍，並且圓角半徑值爲元素的高度值；

製做左半圓或右半圓，元素的高度值是寬度值的2倍，並且圓角半徑值爲元素的寬度值。