css制作半圆
使用CSS制作半圆的方法
方法一：通过border-radius和width/height控制
设置一个正方形的元素，通过border-radius属性将两个角设为圆形，另外两个角保持直角。
.half-circle {
width: 100px;
height: 50px; /* 高度是宽度的一半 */
background-color: #3498db;
border-radius: 50px 50px 0 0; /* 上左和上右圆角 */
}方法二：使用clip-path裁剪
通过clip-path属性直接裁剪出半圆形，这种方法更灵活，可以创建任意角度的半圆。
.half-circle {
width: 100px;
height: 100px;
background-color: #e74c3c;
clip-path: circle(50% at 50% 0);
}方法三：利用伪元素和transform
使用伪元素创建圆形，然后通过transform属性旋转或裁剪。
.half-circle {
position: relative;
width: 100px;
height: 50px;
overflow: hidden;
}
.half-circle::before {
content: "";
position: absolute;
width: 100px;
height: 100px;
background-color: #2ecc71;
border-radius: 50%;
bottom: 0;
}方法四：SVG实现
虽然这不是纯CSS方法，但SVG与CSS配合可以创建更精确的半圆。
<div class="svg-half-circle">
<svg viewBox="0 0 100 50">
<path d="M0,50 A50,50 0 0,1 100,50" fill="#9b59b6"/>
</svg>
</div>注意事项
- 半圆方向可以通过调整border-radius值或transform属性改变
- 考虑浏览器兼容性，特别是clip-path属性
- 响应式设计时，使用百分比单位而非固定像素值
