CSS3可以通過border-radius屬性來創建圓角效果,而可以通過設置其中一個值為0來實現半圓形。下面的例子展示了如何用CSS3來制作半圓形。
.half-circle{ width: 200px; height: 100px; border-radius: 100px 100px 0 0; background-color: #f2f2f2; }
在這個例子中,我們使用一個div元素來創建一個半圓形的容器,然后設置其寬度和高度,最后設置border-radius屬性。其中前兩個值為100px,表示左右兩側都有圓角,后兩個值為0,表示底部沒有圓角,于是就得到了一個半圓形。
需要注意的是,半圓的大小取決于容器的寬度和高度,因此如果需要調整半圓的大小,直接修改這兩個屬性即可。