css一个圆圈三种颜色显示

在CSS中，我们可以通过border-radius属性和background-color属性来创建一个圆圈，其中border-radius属性指定了边框的弧度，而background-color属性指定了圆圈的颜色。

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
}

上述代码创建了一个红色的圆圈，其中width和height属性指定了圆圈的尺寸，而border-radius属性的值50%表示边框的弧度为圆形的一半，即创建了一个圆圈。我们可以通过改变background-color属性的值，来改变圆圈的颜色。

例如，下面的代码创建了一个蓝色的圆圈：

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

我们还可以通过CSS的伪类来实现鼠标悬浮时圆圈颜色的变换。例如，下面的代码创建了一个初始为红色的圆圈，当鼠标悬浮在圆圈上时，圆圈变为绿色：

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
}

.circle:hover {
  background-color: green;
}

上述代码中，:hover是CSS的伪类，表示当鼠标悬浮在.circle元素上时，应用:hover后面的样式。因此，当鼠标悬浮在圆圈上时，圆圈的背景颜色会变为绿色。