どのように生成するか:中空円

CSSを使用して中空円を生成する方法を学びます。

どうやって中空円を生成するか

第1ステップ - HTMLの追加:

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

第2ステップ - CSSの追加:

円を生成するには、 border-radius 属性の値を設定します。 50%を設定し、次に height および width 属性と値の組み合わせを使用して:

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

自分で試してみる