css半圆制作

使用border-radius制作半圆

通过设置border-radius属性可以实现半圆效果。需要将元素的宽度和高度比例设置为2:1（半圆水平方向）或1:2（半圆垂直方向），并设置对应方向的圆角。

水平半圆示例代码：

.horizontal-semi-circle {
  width: 200px;
  height: 100px;
  background: #ff6b6b;
  border-radius: 100px 100px 0 0;
}

垂直半圆示例代码：

.vertical-semi-circle {
  width: 100px;
  height: 200px;
  background: #48dbfb;
  border-radius: 0 100px 100px 0;
}

使用clip-path制作半圆

clip-path属性可以通过路径裁剪创建更精确的半圆形状，支持各种方向的自定义。

示例代码：

.clip-semi-circle {
  width: 200px;
  height: 100px;
  background: #1dd1a1;
  clip-path: ellipse(50% 50% at 50% 0%);
}

SVG实现半圆

使用内联SVG可以创建矢量半圆，适合需要缩放或动画的场景。

示例代码：

<svg width="200" height="100" viewBox="0 0 200 100">
  <path d="M0,100 A100,100 0 0,1 200,100 Z" fill="#feca57"/>
</svg>

伪元素创建半圆

通过伪元素可以创建装饰性半圆而不影响DOM结构。

示例代码：

.pseudo-semi-circle {
  position: relative;
  width: 200px;
  height: 100px;
  overflow: hidden;
}
.pseudo-semi-circle::after {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #5f27cd;
  bottom: 0;
}

渐变背景模拟半圆

线性渐变或径向渐变可以模拟半圆视觉效果，适合简单的装饰需求。

示例代码：

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