css制作椭圆

使用 border-radius 制作椭圆

通过设置 border-radius 的百分比值，可以将矩形元素变为椭圆。关键是将 border-radius 设置为 50%，并结合宽高比例调整椭圆形状。

.ellipse {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  border-radius: 50%;
}

• 宽度 > 高度：生成水平方向的椭圆。
• 高度 > 宽度：生成垂直方向的椭圆。
• 宽高相等：生成正圆。

使用 clip-path 制作椭圆

通过 clip-path 的 ellipse() 函数直接定义椭圆形状，参数依次为椭圆的水平半径、垂直半径和中心位置。

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

• 50% 50%：椭圆的水平半径和垂直半径（相对于元素宽高）。
• at 50% 50%：椭圆中心位置（默认为元素中心）。

使用 SVG 制作椭圆

通过内联 SVG 的 <ellipse> 标签绘制椭圆，可精确控制样式和动画。

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

• cx/cy：椭圆中心坐标。
• rx/ry：水平半径和垂直半径。

响应式椭圆设计

结合 CSS 变量或视窗单位（如 vw/vh）实现自适应椭圆。

.ellipse {
  width: 30vw;
  height: 20vh;
  background-color: #9b59b6;
  border-radius: 50%;
}

椭圆边框效果

通过 border 和 box-sizing 为椭圆添加边框。

.ellipse {
  width: 180px;
  height: 90px;
  border: 10px solid #f1c40f;
  border-radius: 50%;
  box-sizing: border-box;
}