CSS 中怎么設半圓呢？在前面我們已經介紹了 CSS border-radius 屬性用于設定圓角。不過如果只需要設置半圓，那么就需要使用一些特殊的技巧啦。

/* 圓形 */
div {
width: 100px;
height: 100px;
border-radius: 50%;
}
/* 水平半圓 */
div {
width: 100px;
height: 50px;
border-radius: 0 0 50% 50%;
}
/* 豎直半圓 */
div {
width: 50px;
height: 100px;
border-radius: 50% 50% 0 0;
}

對于水平半圓，我們設置了一個高度為其寬度的一半，然后通過 border-radius 屬性來控制其弧度。同樣地，豎直半圓也是通過類似的方式實現的。

除了以上的方法，我們還可以使用偽元素來實現半圓效果。比如，可以使用 ::before 或 ::after 偽元素絕對定位到元素的頂部，然后設定寬度、高度以及圓角等屬性，如下所示：

div {
position: relative;
height: 50px;
}
div::before {
content: "";
width: 100px;
height: 100px;
background-color: red;
border-radius: 0 0 50% 50%;
position: absolute;
top: -50px;
left: 0;
}

在這個例子中，我們使用了 ::before 偽元素來創建一個位于元素頂部的半圓形。設置其寬度和高度、底部的圓角等屬性后，再將其絕對定位到元素頂部，最后通過 top 和 left 屬性來控制其位置即可。