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来隐藏不需要显示的部分