制作半圆效果 css

使用 border-radius 制作半圆

通过设置 border-radius 属性为元素创建半圆效果。将宽度设置为高度的两倍，并设置 border-radius 为高度值。例如，制作一个向上的半圆：

.semi-circle {
  width: 200px;
  height: 100px;
  border-radius: 100px 100px 0 0;
  background-color: #3498db;
}

使用 clip-path 制作半圆

clip-path 属性可以更精确地裁剪元素形状。使用 ellipse 或 circle 函数创建半圆：

.semi-circle {
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  clip-path: circle(50% at 50% 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="#2ecc71"/>
</svg>

使用 transform 旋转圆

通过旋转一个完整的圆形元素来创建半圆效果：

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #9b59b6;
  transform: scaleY(0.5);
}

使用伪元素创建半圆

通过伪元素 ::before 或 ::after 生成半圆：

.element::after {
  content: '';
  display: block;
  width: 100px;
  height: 50px;
  border-radius: 0 0 50px 50px;
  background-color: #f1c40f;
}

每种方法适用于不同场景，border-radius 适合简单半圆，clip-path 提供更灵活的形状控制，SVG 适合复杂图形，而伪元素适合装饰性半圆效果。