css半圆制作
使用border-radius制作半圆
通过设置border-radius属性可以实现半圆效果。需要将元素的宽度和高度比例设置为2:1（半圆水平方向）或1:2（半圆垂直方向），并设置对应方向的圆角。
水平半圆示例代码：
.horizontal-semi-circle {
width: 200px;
height: 100px;
background: #ff6b6b;
border-radius: 100px 100px 0 0;
}垂直半圆示例代码：
.vertical-semi-circle {
width: 100px;
height: 200px;
background: #48dbfb;
border-radius: 0 100px 100px 0;
}使用clip-path制作半圆
clip-path属性可以通过路径裁剪创建更精确的半圆形状，支持各种方向的自定义。
示例代码：
.clip-semi-circle {
width: 200px;
height: 100px;
background: #1dd1a1;
clip-path: ellipse(50% 50% at 50% 0%);
}SVG实现半圆
使用内联SVG可以创建矢量半圆，适合需要缩放或动画的场景。
示例代码：
<svg width="200" height="100" viewBox="0 0 200 100">
<path d="M0,100 A100,100 0 0,1 200,100 Z" fill="#feca57"/>
</svg>伪元素创建半圆
通过伪元素可以创建装饰性半圆而不影响DOM结构。
示例代码：
.pseudo-semi-circle {
position: relative;
width: 200px;
height: 100px;
overflow: hidden;
}
.pseudo-semi-circle::after {
content: '';
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background: #5f27cd;
bottom: 0;
}渐变背景模拟半圆
线性渐变或径向渐变可以模拟半圆视觉效果，适合简单的装饰需求。
示例代码：
.gradient-semi-circle {
width: 200px;
height: 100px;
background: radial-gradient(circle at 50% 0%, #ff9ff3 50%, transparent 50%);
}
