css制作半圆
使用 border-radius 制作半圆
通过设置 border-radius 属性，可以将矩形的边角弯曲成圆弧形状。制作半圆的关键是将宽度和高度设置为 2:1 的比例，并只对两个角应用圆角。
.half-circle {
width: 100px;
height: 50px;
background-color: #3498db;
border-radius: 50px 50px 0 0;
}使用 clip-path 裁剪半圆
clip-path 允许通过 SVG 路径或基本形状裁剪元素。使用 ellipse 或 circle 函数可以轻松制作半圆。
.half-circle {
width: 100px;
height: 100px;
background-color: #e74c3c;
clip-path: ellipse(50% 50% at 50% 0);
}使用 transform 旋转圆形
通过创建一个完整的圆形，然后旋转或遮挡一半，可以实现半圆效果。结合 overflow: hidden 可以隐藏不需要的部分。
.container {
width: 100px;
height: 50px;
overflow: hidden;
}
.circle {
width: 100px;
height: 100px;
background-color: #2ecc71;
border-radius: 50%;
transform: translateY(-50%);
}使用伪元素增强半圆效果
通过 ::before 或 ::after 伪元素，可以在现有元素上叠加半圆形状，适合创建复杂的半圆装饰效果。
.element {
position: relative;
width: 100px;
height: 50px;
}
.element::after {
content: '';
position: absolute;
bottom: -25px;
left: 0;
width: 100px;
height: 50px;
background-color: #9b59b6;
border-radius: 0 0 50px 50px;
}使用 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 Z" fill="#f39c12"/>
</svg>
