用css制作椭圆

使用 CSS 制作椭圆

在 CSS 中，可以通过 border-radius 属性轻松创建椭圆形状。以下是具体实现方法：

基本椭圆

通过设置 border-radius 值为 50%，可以将一个矩形元素变为椭圆。需要确保元素的宽度和高度不相等，否则会变成圆形。

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

调整椭圆比例

通过改变宽度和高度的比例，可以控制椭圆的扁平或细长程度。

.flat-ellipse {
  width: 250px;
  height: 100px;
  background-color: #e74c3c;
  border-radius: 50%;
}

.tall-ellipse {
  width: 100px;
  height: 200px;
  background-color: #2ecc71;
  border-radius: 50%;
}

使用单独边框半径

如果需要更精确控制椭圆形状，可以分别设置水平和垂直半径。

.custom-ellipse {
  width: 200px;
  height: 150px;
  background-color: #9b59b6;
  border-radius: 100px / 75px; /* 水平半径/垂直半径 */
}

椭圆边框

可以为椭圆添加边框效果，创建空心椭圆。

.hollow-ellipse {
  width: 180px;
  height: 120px;
  border: 5px solid #f1c40f;
  border-radius: 50%;
  background-color: transparent;
}

椭圆渐变

结合 CSS 渐变可以创建更丰富的视觉效果。

.gradient-ellipse {
  width: 220px;
  height: 140px;
  border-radius: 50%;
  background: linear-gradient(45deg, #1abc9c, #3498db);
}

这些方法提供了灵活的椭圆创建方式，通过调整尺寸、边框和颜色等属性，可以满足各种设计需求。