css制作半圆教程
使用CSS制作半圆的方法
通过CSS的border-radius属性可以轻松实现半圆效果，以下是几种常见方法：
基础半圆（水平或垂直）
将元素的宽度和高度设置为2:1的比例，并设置border-radius为100%：
.half-circle {
width: 100px;
height: 50px; /* 高度为宽度的一半 */
border-radius: 100px 100px 0 0; /* 上左、上右圆角 */
background: #ff6b6b;
}这会创建一个朝上的半圆。修改border-radius的值可调整方向：
- 朝下：
0 0 100px 100px - 朝左：
100px 0 0 100px - 朝右：
0 100px 100px 0
使用伪元素创建半圆
通过::before或::after伪元素实现更灵活的半圆：
.element::before {
content: "";
display: block;
width: 80px;
height: 40px;
border-radius: 0 0 80px 80px;
background: linear-gradient(to right, #ff758c, #ff7eb3);
}带边框的半圆
结合border属性创建有描边的半圆：
.bordered-half-circle {
width: 120px;
height: 60px;
border: 4px solid #4ecdc4;
border-bottom: 0;
border-radius: 120px 120px 0 0;
}动态比例半圆
使用CSS变量实现可调整比例：
:root {
--radius: 150px;
}
.dynamic-half-circle {
width: var(--radius);
height: calc(var(--radius) / 2);
border-radius: var(--radius) var(--radius) 0 0;
background: #a5ffd6;
}注意事项
- 确保父容器有足够空间，避免半圆被裁剪
- 考虑使用
overflow: hidden控制显示范围 - 通过
transform: rotate()可以旋转半圆角度 - 结合
box-shadow可添加投影效果增强立体感
这些方法均可通过调整参数实现不同大小、颜色和方向的半圆效果。
