標題：CSS 實現 div 半圓
CSS（層疊樣式表）是一種用于定義網頁中元素樣式的樣式表語言。它可以控制網頁的布局、顏色和字體等外觀方面的內容。在 CSS 中，我們可以使用各種技術和屬性來創建各種形狀的元素，包括半圓。
一、使用 CSS border-radius 屬性實現半圓
要在 div 元素中創建一個半圓，我們可以使用 CSS 的 border-radius 屬性。border-radius 屬性在一個元素的四個角上設置圓角的半徑，當我們設置元素的高度和寬度相等時，border-radius 屬性只設置一個角為元素寬度的一半，就可以實現一個半圓。下面是一個實現半圓的示例代碼：

<div class="half-circle"></div>
<br>
<style>
.half-circle {
width: 100px;
height: 100px;
border-radius: 50% 50% 0 0;
background-color: red;
}
</style>

通過設置 div 的寬度和高度相等，并將 border-radius 屬性設置為50% 50% 0 0，我們可以創建一個紅色的半圓形 div。
二、使用 CSS 的偽元素 before 和 after 創建半圓
除了使用 border-radius 屬性，我們還可以使用 CSS 的偽元素 before 和 after 來創建半圓。

<div class="half-circle"></div>
<br>
<style>
.half-circle {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
}
.half-circle:before {
content: "";
position: absolute;
width: 100%;
height: 100px;
background-color: red;
border-radius: 50% / 100px 100px 0 0;
top: 0;
}
</style>

在這個示例中，我們先創建一個 div 元素，并將其設置為相對定位（position: relative）和溢出隱藏（overflow: hidden）。然后，我們使用偽元素 before 創建一個絕對定位的元素，并設置其寬度和高度與 div 元素相同。通過將 border-radius 屬性設置為50% / 100px 100px 0 0，我們可以創建一個紅色的半圓形。
三、使用 CSS transform 屬性旋轉 div 實現半圓
我們還可以使用 CSS 的 transform 屬性來實現半圓。通過設置 div 的寬度和高度，再使用 transform: rotate() 來旋轉 div，我們可以達到半圓形的效果。

<div class="half-circle"></div>
<br>
<style>
.half-circle {
width: 100px;
height: 200px;
background-color: red;
transform: rotate(45deg);
border-radius: 50% / 100% 100% 0 0;
}
</style>

在這個示例中，我們設置 div 的寬度為 100px、高度為 200px，并將其背景顏色設置為紅色。然后，我們使用 transform: rotate(45deg) 將 div 旋轉 45 度。最后，通過將 border-radius 屬性設置為50% / 100% 100% 0 0，我們可以創建一個旋轉后的半圓形。
：
本文介紹了三種使用 CSS 實現半圓形的方法：使用 border-radius 屬性、使用偽元素 before 和 after、使用 transform 屬性。通過這些方法，我們可以輕松地在網頁中創建半圓形元素，并根據需要進行樣式和布局的進一步調整。無論是制作圖標還是裝飾元素，這些技術都為我們提供了豐富的選擇。