css中的椭圆如何多次使用

在CSS中，椭圆是一种常见的形状，可以通过border-radius属性来创建。

/* 创建一个50x50的椭圆 */
.ellipse{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: gray;
}

这是创建一个简单椭圆的例子，其中border-radius的值为50%，表示宽和高的一半作为半径，这样就创建了一个圆形的形状。

可以通过修改border-radius属性的值来创建各种椭圆，例如水平椭圆、垂直椭圆、半圆、椭球等等。

/* 创建一个水平椭圆 */
.ellipse{
  width: 100px;
  height: 50px;
  border-radius: 50%/100% 50%;
  background-color: gray;
}

/* 创建一个垂直椭圆 */
.ellipse{
  width: 50px;
  height: 100px;
  border-radius: 50%/50% 100%;
  background-color: gray;
}

/* 创建一个半圆 */
.ellipse{
  width: 50px;
  height: 50px;
  border-radius: 50% 50% 0 0;
  background-color: gray;
}

/* 创建一个椭球 */
.ellipse{
  width: 100px;
  height: 50px;
  border-radius: 50%/100%;
  background-color: gray;
}

需要注意的是，当使用多个椭圆时，最好为每个椭圆指定一个类名，这样可以方便地控制每个椭圆的样式。

在HTML中，可以通过添加多个div元素来创建多个椭圆：

在CSS中，可以通过在类名前添加不同的前缀，来为每个椭圆添加不同的类名：

/* 创建3个不同颜色的椭圆 */
.red-ellipse{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
}

.blue-ellipse{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: blue;
}

.green-ellipse{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: green;
}

在HTML中，可以通过为每个椭圆的class属性添加对应的类名，来为多个椭圆添加不同的样式：

通过以上方法，可以轻松地创建多个椭圆，并为每个椭圆添加不同的样式。