CSS3中半圓的繪制非常簡單，只需要了解其對應的屬性就可以進行編寫。

// 定義一個半圓形 container
.container {
width: 200px;
height: 100px;
overflow: hidden;
position: relative;
border-radius: 100px 100px 0 0;
}
// 定義一個半圓形元素
.half-circle {
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
bottom: 0;
background-color: #f00;
}

如上所示，我們需要創建一個容器（.container）和一個內部的元素（.half-circle），并將容器的高度設置為寬度的一半，同時將元素的高度和寬度都設置為相同的值，這里假設為200px。 接下來，我們將容器設置為相對定位（position: relative），并給其設置一個圓角半徑（border-radius），需要注意的是，這里只需要指定左上角和右上角的值。 然后，在內部元素上定義一個圓形的邊框半徑（border-radius: 50%），并將其定位在容器的底部（bottom: 0）。 最后，我們只需要設置元素的背景顏色即可看到一個漂亮的半圓形。