css如何制作半圆
使用 border-radius 制作半圆
通过设置 border-radius 属性，可以创建半圆效果。需要将元素的宽度和高度比例调整为 2:1（例如宽度为高度的两倍），并设置 border-radius 为 50% 或固定值。
.half-circle {
width: 100px;
height: 50px;
border-radius: 50px 50px 0 0;
background-color: #3498db;
}border-radius的四个值分别对应左上、右上、右下、左下角的圆角半径。- 若需要下半圆，调整
border-radius为0 0 50px 50px。
使用 clip-path 裁剪半圆
clip-path 可以通过路径裁剪实现更灵活的图形，包括半圆。
.half-circle {
width: 100px;
height: 100px;
background-color: #e74c3c;
clip-path: circle(50% at 50% 0);
}circle(50% at 50% 0)表示裁剪一个半径为 50% 的圆，圆心位于水平居中（50%）、垂直顶部（0）。- 调整圆心位置（如
50% 100%）可生成下半圆。
使用伪元素和 transform 旋转
通过伪元素和旋转变换，可以将圆形裁剪为半圆。
.half-circle {
position: relative;
width: 100px;
height: 50px;
overflow: hidden;
}
.half-circle::before {
content: "";
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #2ecc71;
bottom: 0;
transform: translateY(50%);
}- 父容器设置
overflow: hidden隐藏超出部分。 - 伪元素通过
transform: translateY(50%)向下移动，显示上半部分。
使用 SVG 实现半圆
SVG 提供更精确的图形控制，适合复杂场景。
<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="#9b59b6" />
</svg>d属性定义路径：M起点，A绘制圆弧，Z闭合路径。- 调整
A的参数可改变圆弧方向和大小。
注意事项
- 圆角方案需确保宽高比例正确，否则可能生成椭圆。
clip-path和 SVG 的兼容性较好，适合现代浏览器。- 伪元素方案需注意父容器的定位和溢出处理。
