css制作椭圆

使用 border-radius 属性创建椭圆

通过调整 border-radius 的百分比值，可以轻松将矩形元素变为椭圆。水平半径和垂直半径分别设置为 50% 和不同的值，形成椭圆形状。

.ellipse {
  width: 200px;
  height: 100px;
  border-radius: 50% / 50%; /* 简写形式 */
  background-color: #ff6b6b;
}

使用 SVG 绘制椭圆

SVG 提供原生椭圆绘制功能，通过 <ellipse> 标签定义椭圆的水平和垂直半径（rx 和 ry）。

<svg width="200" height="100">
  <ellipse cx="100" cy="50" rx="80" ry="40" fill="#74b9ff" />
</svg>

使用 clip-path 裁剪椭圆

通过 clip-path 的 ellipse() 函数裁剪元素，参数依次为水平半径、垂直半径和圆心位置。

.clip-ellipse {
  width: 160px;
  height: 80px;
  clip-path: ellipse(80px 40px at 80px 40px);
  background-color: #55efc4;
}

使用 CSS 渐变模拟椭圆

径向渐变（radial-gradient）可模拟椭圆效果，通过设置不对称的渐变范围实现。

.gradient-ellipse {
  width: 180px;
  height: 90px;
  background: radial-gradient(ellipse at center, #a29bfe 0%, #6c5ce7 100%);
  border-radius: 50%;
}

注意事项

• 百分比单位在 border-radius 中相对于元素自身的宽高。
• SVG 的 <ellipse> 适合需要矢量缩放或复杂交互的场景。
• clip-path 的兼容性较新，需检查浏览器支持情况。