css制作椭圆盒子

使用 border-radius 属性制作椭圆

通过调整 border-radius 的百分比值可以创建椭圆形状。将水平半径和垂直半径设置为不同值，例如 border-radius: 50% / 30%，其中 50% 表示水平半径，30% 表示垂直半径。

.ellipse-box {
  width: 200px;
  height: 100px;
  background-color: #ff6b6b;
  border-radius: 50% / 30%;
}

使用 clip-path 属性裁剪椭圆

clip-path 允许通过 SVG 路径或基本形状（如 ellipse）裁剪元素。使用 ellipse() 函数可以更精确地控制椭圆的形状和位置。

.ellipse-box {
  width: 200px;
  height: 100px;
  background-color: #4ecdc4;
  clip-path: ellipse(50% 30% at 50% 50%);
}

使用 SVG 内联背景

通过 SVG 的 <ellipse> 元素创建背景图像，并将其作为 CSS 的 background-image。这种方法支持更复杂的椭圆样式，如渐变或描边。

.ellipse-box {
  width: 200px;
  height: 100px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100"><ellipse cx="100" cy="50" rx="100" ry="50" fill="%2367b26f"/></svg>');
}

结合 transform 实现动态椭圆

通过 transform: scale() 对圆形进行缩放，可以快速生成椭圆。先将元素设置为圆形（border-radius: 50%），再通过 scale 调整比例。

.ellipse-box {
  width: 100px;
  height: 100px;
  background-color: #5b5f97;
  border-radius: 50%;
  transform: scale(2, 0.8);
}

注意事项

• border-radius 方法在旧浏览器中可能存在兼容性问题，需测试目标环境。
• clip-path 的 ellipse() 函数需注意坐标原点（at 后的参数）是否居中。
• SVG 方法适合静态设计，但动态修改样式较复杂。