Q33
★ ★ ★ ★ ★
如何用 CSS 画一个半圆？
⚡ 速记答案（30 秒）
宽度 100px、高度 50px、background: red、border-radius: 100px 100px 0 0（上半圆）。利用宽高比 + border-radius 组合。
📖 详细讲解
标准面试回答（推荐记住）
画半圆很简单，利用 border-radius 的特性。比如画上半圆：设置元素宽度 100px、高度 50px，背景色，然后 border-radius: 100px 100px 0 0，意思是左上和右上两个角的圆角半径等于宽度，左下右下为 0。同理画下半圆就是 border-radius: 0 0 100px 100px，左半圆是 border-radius: 100px 0 0 100px。
✅ 面试要点
- •宽高比 2:1
- •border-radius 控制圆角
- •四个角分别设置
💻 代码示例
CSS 半圆
.half-circle-top {
width: 100px;
height: 50px;
background: #3b82f6;
border-radius: 100px 100px 0 0;
}
.half-circle-bottom {
width: 100px;
height: 50px;
background: #3b82f6;
border-radius: 0 0 100px 100px;
}