前文介紹了css3畫實心圓和圓角的方法，本文将繼續介紹用CSS3來畫一個半圓的方法。
CSS3畫一個半圓
無論圓角、圓弧、實心圓、半圓，css3的實作代碼都是 border-radius 屬性，border-radius不但可以定義圓半徑和圓角大小，還可以設定圓弧的方向，進而畫出各種方向的半圓。
實作代碼很簡單，一個上半圓的css3代碼如下：.semi-circle{
width:100px;
height:50px;
background-color:#cb18f8;
border-radius:50px 50px 0 0;
}
代碼分析：
1)利用 border-radius 定義各個方向的圓弧半徑，把左上和右上的圓角半徑設為50px，右下和左下的圓角半徑設為0，出來的效果就是一個上半圓了。
2)圓角半徑要等于矩形高度 height ，上例的值是50px。
各種方向的半圓
上例是一個上半圓的實作代碼，我們可以調整 border-radius 的值，以及矩形寬度(width)和高度(height)的值，進而實作各種方向的半圓。如圖：
CSS3畫各種方向的半圓
html代碼如下：
.semi-circle{
width:100px;
height:50px;
background-color:#cb18f8;
border-radius:50px 50px 0 0;
}
.semi-circle2{
width:100px;
height:50px;
background-color:#cb18f8;
border-radius:0 0 50px 50px;
}
.semi-circle3{
width:50px;
height:100px;
background-color:#cb18f8;
border-radius:50px 0 0 50px;
}
.semi-circle4{
width:50px;
height:100px;
background-color:#cb18f8;
border-radius:0 50px 50px 0;
}
table{
width:400px;
}