带有 4 种颜色的 CSS 的圆圈

在网页设计中，常用到圆圈元素作为标签或按钮。为了让网页元素更加鲜明突出，我们可以为圆圈添加颜色。本文将介绍如何使用 CSS 为圆圈添加四种不同的颜色。

HTML 代码

我们首先需要准备一个基础的 HTML 代码，来创建圆圈元素。代码如下：

<div class="circle"></div>

CSS 代码

接下来，我们需要为圆圈添加基础 CSS 样式，并为其添加四种颜色。代码如下：

/* 圆圈基础样式 */
.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ccc;
}

/* 添加四种颜色 */
.circle.red {
  background-color: #f44336;
}
.circle.blue {
  background-color: #2196f3;
}
.circle.green {
  background-color: #4caf50;
}
.circle.yellow {
  background-color: #ffeb3b;
}

在上述代码中，我们先设定了圆形的基础样式，之后依次为其添加了四种不同的颜色，即红色、蓝色、绿色和黄色。需要注意的是，我们添加颜色时，选择器前面需要添加 .circle，这样才能作用于圆形元素。

HTML 中使用

最后，我们可以在 HTML 中为圆圈元素添加各自的类名，来展示圆圈的四种颜色。代码如下：

<div class="circle red"></div>

<div class="circle blue"></div>

<div class="circle green"></div>

<div class="circle yellow"></div>

上述代码中，我们对 div 元素分别添加了四个类名，用来展示不同的颜色。运行代码，就可以看到带有四种颜色的 CSS 圆圈。

结语

本文介绍了如何使用 CSS 为圆圈元素添加四种不同的颜色。希望对初学者有所帮助。