css制作椭圆

使用 border-radius 属性制作椭圆

在 CSS 中，可以通过 border-radius 属性制作椭圆形状。border-radius 接受百分比值，当水平半径和垂直半径不同时，可以形成椭圆。

.ellipse {
  width: 200px;
  height: 100px;
  border-radius: 50% / 50%; /* 水平半径50%，垂直半径50% */
  background-color: #3498db;
}

使用百分比调整椭圆比例

通过调整 width 和 height 的比例，配合 border-radius: 50%，可以控制椭圆的形状。宽度大于高度时，形成水平椭圆；高度大于宽度时，形成垂直椭圆。

.horizontal-ellipse {
  width: 300px;
  height: 150px;
  border-radius: 50%;
  background-color: #e74c3c;
}

.vertical-ellipse {
  width: 150px;
  height: 300px;
  border-radius: 50%;
  background-color: #2ecc71;
}

使用 border-radius 四值语法

border-radius 还支持四值语法，分别设置四个角的水平半径和垂直半径，用斜杠分隔。通过这种方式可以更灵活地控制椭圆形状。

.custom-ellipse {
  width: 250px;
  height: 150px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background-color: #9b59b6;
}

使用 SVG 绘制椭圆

如果需要更复杂的椭圆效果，可以使用 SVG 的 <ellipse> 元素。SVG 提供了更精确的控制，支持描边、填充等效果。

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

使用 clip-path 创建椭圆

clip-path 属性可以通过 ellipse() 函数裁剪元素为椭圆形状。这种方法适合对复杂内容进行椭圆裁剪。

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