css半圆制作
使用 border-radius 制作半圆
通过设置 border-radius 属性，将元素的圆角半径调整为宽度或高度的一半，可以制作水平或垂直方向的半圆。水平半圆需要高度为宽度的一半，垂直半圆需要宽度为高度的一半。
.horizontal-semi-circle {
width: 200px;
height: 100px;
background-color: #ff6b6b;
border-radius: 100px 100px 0 0; /* 上左、上右、下右、下左 */
}
.vertical-semi-circle {
width: 100px;
height: 200px;
background-color: #4ecdc4;
border-radius: 100px 0 0 100px; /* 左上、右上、右下、左下 */
}使用 clip-path 制作半圆
clip-path 允许通过 SVG 路径或基本形状（如 circle）裁剪元素。通过调整 clip-path 的参数，可以精确控制半圆的形状和方向。
.clip-path-semi-circle {
width: 200px;
height: 100px;
background-color: #ff9e2c;
clip-path: path('M 0,100 A 100,100 0 0,1 200,100 L 200,0 A 100,100 0 0,0 0,0 Z');
}使用伪元素和 transform 制作半圆
通过伪元素（如 ::before 或 ::after）结合 transform 属性，可以动态生成半圆效果。这种方法适用于需要动态调整半圆位置的场景。
.pseudo-semi-circle {
position: relative;
width: 200px;
height: 100px;
overflow: hidden;
}
.pseudo-semi-circle::before {
content: '';
position: absolute;
width: 200px;
height: 200px;
background-color: #6b5b95;
border-radius: 50%;
bottom: 0;
}使用 SVG 制作半圆
SVG 的 <path> 或 <circle> 元素可以更灵活地绘制半圆，适合需要复杂交互或动画的场景。
<svg width="200" height="100" viewBox="0 0 200 100">
<path d="M 0,100 A 100,100 0 0,1 200,100 Z" fill="#d64161" />
</svg>使用 radial-gradient 制作半圆
通过 CSS 的 radial-gradient 背景渐变，可以模拟半圆效果。这种方法适合装饰性用途，但可能缺乏精确的形状控制。
.radial-gradient-semi-circle {
width: 200px;
height: 100px;
background: radial-gradient(circle at 50% 0, #92a8d1 50%, transparent 50%);
}注意事项
- 确保半圆的容器尺寸比例正确（水平半圆高度为宽度的一半，垂直半圆反之）。
- 使用
overflow: hidden可以隐藏超出容器的部分，避免半圆显示不完整。 clip-path和 SVG 的兼容性较好，但radial-gradient在旧浏览器中可能需要前缀。
