CSS是前端開發中不可或缺的一部分，它可以讓我們很方便地繪制各種形狀的元素。今天，我們就來講一講如何用CSS繪制半圓環。

//HTML代碼
<div class="outer">
<div class="inner"></div>
</div>
//CSS代碼
.outer {
position: relative;
width: 200px;
height: 100px;
border: 10px solid #ccc;
border-top-color: red;
border-radius: 100px 100px 0 0;
}
.inner {
position: absolute;
top: -20px;
left: -20px;
width: 240px;
height: 140px;
border: 10px solid #ccc;
border-top-color: red;
border-radius: 120px 120px 0 0;
background-color: #fff;
}

首先，在HTML中需要創建一個外層容器和一個內層容器。外層容器用來展示半圓環的整體形狀，內層容器則是為了遮蓋住外層容器中間的部分，展現出半圓環的效果。

然后，在CSS中我們需要設置外層容器的寬、高、邊框以及圓角，這里我們將半圓環的上邊框設置為紅色。

接著，我們需要在CSS中設置內層容器的位置、寬、高、邊框、圓角和背景顏色，這里我們再次將半圓環的上邊框設置為紅色，并將背景顏色設置為白色。

最后，通過調整內層容器的位置和大小，使其遮蓋住外層容器中心部分，從而展現出半圓環的效果。

以上就是用CSS實現半圓環的全部內容。希望對大家有所幫助！