如何创建:空心圆

学习如何使用 CSS 创建空心圆。

如何创建空心圆

第一步 - 添加 HTML:

<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>

第二步 - 添加 CSS:

要创建圆形,请使用 border-radius 属性并将值设置为 50%。然后将 heightwidth 属性与匹配的值组合使用:

.dot {
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

亲自试一试