css制作半圆
使用CSS制作半圆的方法
方法一：通过border-radius属性制作半圆
通过设置元素的border-radius属性，可以轻松实现半圆效果。关键在于将border-radius的值设置为元素高度或宽度的一半，并隐藏不需要的部分。
.half-circle {
width: 100px;
height: 50px;
background-color: #3498db;
border-radius: 50px 50px 0 0;
}width和height的比例为2:1（半圆的高度是宽度的一半）。border-radius的四个值分别对应左上、右上、右下、左下角的圆角半径。设置为50px 50px 0 0表示顶部为半圆，底部为直角。
方法二：使用clip-path裁剪半圆
clip-path属性可以通过路径裁剪实现更复杂的形状，包括半圆。
.half-circle-clip {
width: 100px;
height: 100px;
background-color: #e74c3c;
clip-path: circle(50% at 50% 0);
}clip-path: circle(50% at 50% 0)表示裁剪出一个半径为50%的圆，圆心位于元素顶部中点。- 调整圆心位置（如
50% 100%）可以生成底部半圆。
方法三：利用伪元素和transform旋转
通过伪元素和旋转可以生成动态的半圆效果。
.half-circle-rotate {
position: relative;
width: 100px;
height: 50px;
overflow: hidden;
}
.half-circle-rotate::before {
content: "";
position: absolute;
width: 100px;
height: 100px;
background-color: #2ecc71;
border-radius: 50%;
bottom: 0;
transform: translateX(-50%);
}- 父容器设置
overflow: hidden隐藏超出部分。 - 伪元素生成完整的圆，并通过定位和
transform调整显示区域。
方法四：SVG内联实现半圆
SVG可以更精确地绘制半圆，适合复杂场景。
<svg width="100" height="50" viewBox="0 0 100 50">
<path d="M 0,50 A 50,50 0 0,1 50,0 L 100,0 A 50,50 0 0,0 100,50 Z" fill="#9b59b6"/>
</svg>d属性定义路径：A命令绘制圆弧，L命令连接直线。- 调整参数可以控制半圆的方向和大小。
方法五：渐变背景模拟半圆
通过线性渐变可以模拟半圆的视觉效果，但仅限简单场景。
.half-circle-gradient {
width: 100px;
height: 50px;
background: radial-gradient(circle at 50% 0, #f39c12 50%, transparent 50%);
}radial-gradient生成径向渐变，圆心位于顶部中点。- 调整颜色停止点（如
50%）控制半圆的边界清晰度。
注意事项
- 半圆的朝向通过调整
border-radius或clip-path的参数实现（如0 0 50px 50px为底部半圆）。 - 响应式设计中需使用百分比单位或
vw/vh确保比例不变。 - SVG方案适合需要动态修改或动画的场景。
