在CSS中，我們可以使用border-radius和border屬性來創(chuàng)建各種形狀。其中，半圓形狀也是比較常用的一個形狀，可以用來做進(jìn)度條、彈出框等。

/* 創(chuàng)建一個寬高相等的半圓形狀 */
.half-circle {
width: 100px;
height: 50px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border: 1px solid #000;
}

以上代碼中，width和height屬性設(shè)置了半圓形狀的寬高，而border-top-left-radius和border-top-right-radius屬性則決定了半圓的半徑大小。同時為了使半圓形狀更清晰，我們給它添加了一個邊框。

/* 創(chuàng)建一個帶動畫的半圓形狀進(jìn)度條 */
.progress {
width: 200px;
height: 100px;
border-radius: 100px;
border: 10px solid #ccc;
position: relative;
}
.progress-bar {
width: 50%;
height: 100%;
background-color: #f00;
border-radius: 100px 0 0 100px;
position: absolute;
top: 0;
left: 0;
animation: progress 2s ease-in-out;
}
@keyframes progress {
from {
width: 0;
}
to {
width: 50%;
}
}

上述代碼創(chuàng)建了一個帶動畫的半圓形狀進(jìn)度條。我們通過設(shè)置progress-bar的width為50%，并且只對它的左半部分設(shè)置了border-radius屬性，來實現(xiàn)半圓形狀的效果。我們還為progress-bar添加了一個動畫效果，通過改變它的寬度來模擬進(jìn)度條的進(jìn)度變化。