css制作半圆
使用 border-radius 制作半圆
通过设置 border-radius 属性，可以将一个正方形或矩形元素的一侧变为半圆形。具体实现方式如下：
.half-circle {
width: 100px;
height: 50px; /* 高度为宽度的一半 */
background-color: #ff6b6b;
border-radius: 50px 50px 0 0; /* 上左、上右为圆角，下边为直角 */
}调整 border-radius 的顺序可以控制半圆的方向：
50px 50px 0 0：上半圆0 0 50px 50px：下半圆50px 0 0 50px：左半圆0 50px 50px 0：右半圆
使用伪元素制作半圆
通过 ::before 或 ::after 伪元素结合 border-radius 可以创建更灵活的半圆效果：
.element::before {
content: "";
display: block;
width: 100px;
height: 50px;
background: #4ecdc4;
border-radius: 0 0 100px 100px;
}SVG 实现半圆
SVG 提供更精确的半圆绘制方式，适合需要复杂控制的情况：
<svg width="100" height="50" viewBox="0 0 100 50">
<path d="M 0,50 A 50,50 0 0,1 50,0 L 100,0 A 50,50 0 0,1 100,50 Z" fill="#ff9e00"/>
</svg>通过调整 A（圆弧）命令的参数可以控制半圆的大小和方向。
渐变背景模拟半圆
线性渐变可以模拟半圆视觉效果，但缺乏真实的几何属性：
.gradient-half-circle {
width: 100px;
height: 50px;
background: radial-gradient(circle at 50% 0, #ff6b6b 50%, transparent 50%);
}这种方法适合需要半圆作为背景装饰的场景。
