css制作半圆
使用 border-radius 制作半圆
通过设置 border-radius 属性可以轻松创建半圆。将元素的宽度设置为高度的两倍，并设置 border-radius 为 50% 以形成半圆形。
.semicircle {
width: 100px;
height: 50px;
border-radius: 50px 50px 0 0;
background-color: #3498db;
}使用 clip-path 制作半圆
clip-path 属性提供了更灵活的裁剪方式，可以精确控制半圆的形状。使用 ellipse 或 circle 函数可以定义半圆。
.semicircle {
width: 100px;
height: 50px;
clip-path: ellipse(50% 100% at 50% 0%);
background-color: #e74c3c;
}使用 SVG 制作半圆
SVG 是矢量图形的理想选择，可以通过 <path> 或 <circle> 元素绘制半圆。这种方法适合需要复杂图形或动画的场景。
<svg width="100" height="50" viewBox="0 0 100 50">
<path d="M 0,50 A 50,50 0 0,1 100,50 L 100,0 A 50,50 0 0,0 0,0 Z" fill="#2ecc71"/>
</svg>使用伪元素制作半圆
通过伪元素 ::before 或 ::after 可以创建半圆效果，这种方法适合在现有元素上添加装饰性半圆。
.element::after {
content: '';
display: block;
width: 100px;
height: 50px;
border-radius: 0 0 50px 50px;
background-color: #9b59b6;
}使用 transform 制作半圆
结合 transform 属性可以旋转或缩放元素以形成半圆。这种方法适合动态效果或响应式设计。
.semicircle {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #f1c40f;
transform: scaleX(2) translateY(-50%);
}以上方法各有优势，可根据具体需求选择最适合的实现方式。
