如何用 CSS 寫一個半圓

CSS 是一種用于控制網頁元素的樣式語言，我們可以通過使用 CSS 來創建各種類型的圖形，包括半圓。半圓是一種常見的圖形，通常用于裝飾網頁和設計。

下面是一個簡單的示例，演示如何使用 CSS 創建一個半圓：

```css

.half-circle {

position: relative;

width: 100px;

height: 100px;

.half-circle:before,

.half-circle:after {

content: "";

position: absolute;

border-radius: 50%;

width: 50px;

height: 50px;

.half-circle:before {

left: 50px;

top: 0;

background-color: #ccc;

.half-circle:after {

left: 0;

top: 50px;

background-color: #ccc;

上述代碼使用了一個 `.half-circle` 類，并定義了三個 `:before` 和 `:after` 偽元素。這些偽元素具有相同的寬度和高度，并且它們的背景顏色都是 #ccc。

接下來，我們使用 CSS 的 `border-radius` 屬性將半徑設置為 50%，使半圓變成一個完整的圓。最后，我們將偽元素的位置設置為絕對定位，并將其重置為初始值，以便它們在瀏覽器中呈現為一個完整的圓。

這只是一個簡單的示例，實際上，我們可以使用 CSS 創建許多不同類型的半圓，例如圓形、橢圓形、多邊形等。通過使用 CSS，我們可以輕松地創建各種類型的圖形，以滿足我們的需求。