css半圆制作
使用border-radius属性
通过设置border-radius属性为50%并配合宽度和高度，可以创建半圆。例如，制作一个上半圆：
.half-circle {
width: 100px;
height: 50px;
border-radius: 50px 50px 0 0;
background-color: #ff6b6b;
}调整border-radius的四个值可以控制不同方向的半圆（上、下、左、右）。
使用clip-path属性
clip-path允许通过路径裁剪元素形状。以下代码生成一个右半圆：
.half-circle {
width: 100px;
height: 100px;
background-color: #4ecdc4;
clip-path: circle(50% at right);
}修改at后的方向参数（如left、top）可改变半圆朝向。
使用伪元素和旋转
通过伪元素旋转实现半圆效果：
.half-circle {
position: relative;
width: 50px;
height: 100px;
overflow: hidden;
}
.half-circle::after {
content: '';
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background: #ffbe76;
transform: translateX(-50%);
}调整transform参数可控制显示部分。
SVG实现方案
直接使用SVG绘制半圆，嵌入HTML：
<svg width="100" height="50" viewBox="0 0 100 50">
<path d="M0,50 A50,50 0 0,1 50,0 L100,0 A50,50 0 0,0 0,50 Z" fill="#6a89cc"/>
</svg>通过修改path的d属性可调整半圆形态和方向。
