css半圆制作

使用 border-radius 制作半圆

通过设置 border-radius 属性，将元素的圆角半径调整为宽度或高度的一半，可以制作水平或垂直方向的半圆。水平半圆需要高度为宽度的一半，垂直半圆需要宽度为高度的一半。

.horizontal-semi-circle {
  width: 200px;
  height: 100px;
  background-color: #ff6b6b;
  border-radius: 100px 100px 0 0; /* 上左、上右、下右、下左 */
}

.vertical-semi-circle {
  width: 100px;
  height: 200px;
  background-color: #4ecdc4;
  border-radius: 100px 0 0 100px; /* 左上、右上、右下、左下 */
}

使用 clip-path 制作半圆

clip-path 允许通过 SVG 路径或基本形状（如 circle）裁剪元素。通过调整 clip-path 的参数，可以精确控制半圆的形状和方向。

.clip-path-semi-circle {
  width: 200px;
  height: 100px;
  background-color: #ff9e2c;
  clip-path: path('M 0,100 A 100,100 0 0,1 200,100 L 200,0 A 100,100 0 0,0 0,0 Z');
}

使用伪元素和 transform 制作半圆

通过伪元素（如 ::before 或 ::after）结合 transform 属性，可以动态生成半圆效果。这种方法适用于需要动态调整半圆位置的场景。

.pseudo-semi-circle {
  position: relative;
  width: 200px;
  height: 100px;
  overflow: hidden;
}

.pseudo-semi-circle::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: #6b5b95;
  border-radius: 50%;
  bottom: 0;
}

使用 SVG 制作半圆

SVG 的 <path> 或 <circle> 元素可以更灵活地绘制半圆，适合需要复杂交互或动画的场景。

<svg width="200" height="100" viewBox="0 0 200 100">
  <path d="M 0,100 A 100,100 0 0,1 200,100 Z" fill="#d64161" />
</svg>

使用 radial-gradient 制作半圆

通过 CSS 的 radial-gradient 背景渐变，可以模拟半圆效果。这种方法适合装饰性用途，但可能缺乏精确的形状控制。

.radial-gradient-semi-circle {
  width: 200px;
  height: 100px;
  background: radial-gradient(circle at 50% 0, #92a8d1 50%, transparent 50%);
}

注意事项

• 确保半圆的容器尺寸比例正确（水平半圆高度为宽度的一半，垂直半圆反之）。
• 使用 overflow: hidden 可以隐藏超出容器的部分，避免半圆显示不完整。
• clip-path 和 SVG 的兼容性较好，但 radial-gradient 在旧浏览器中可能需要前缀。