css怎样制作半圆
使用CSS制作半圆
通过CSS的border-radius属性可以轻松制作半圆。关键在于设置元素的宽度和高度比例，并调整border-radius的值。
水平半圆（上半圆或下半圆）
.semi-circle-horizontal {
width: 100px;
height: 50px; /* 高度是宽度的一半 */
background: #ff6b6b;
border-radius: 50px 50px 0 0; /* 上半圆 */
/* 下半圆使用：border-radius: 0 0 50px 50px; */
}垂直半圆（左半圆或右半圆）
.semi-circle-vertical {
width: 50px; /* 宽度是高度的一半 */
height: 100px;
background: #4ecdc4;
border-radius: 50px 0 0 50px; /* 左半圆 */
/* 右半圆使用：border-radius: 0 50px 50px 0; */
}使用伪元素制作半圆
通过伪元素可以更灵活地控制半圆的位置和样式：
.element::before {
content: '';
display: block;
width: 100px;
height: 50px;
background: #ff9e2c;
border-radius: 50px 50px 0 0;
}动态调整半圆大小
结合CSS变量可以动态调整半圆尺寸：
:root {
--semi-circle-size: 100px;
}
.dynamic-semi-circle {
width: var(--semi-circle-size);
height: calc(var(--semi-circle-size) / 2);
border-radius: calc(var(--semi-circle-size) / 2) calc(var(--semi-circle-size) / 2) 0 0;
background: #a1c4fd;
}注意事项
- 确保元素的
width和height比例正确（半圆需要宽度是高度的两倍或反之） - 圆角半径值应为元素高度或宽度的一半
- 考虑使用
overflow: hidden来隐藏不需要显示的部分
