CSS中添加紅圈可以給頁面增添一份生動，下面我們來看一下如何使用CSS添加紅圈。

/* 用CSS添加紅圈 */
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: red;
}

以上是通過設置盒模型的圓角屬性實現的，我們還可以通過添加偽元素來實現紅圈效果。

/* 通過偽元素添加紅圈 */
.circle:before {
content: '';
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: red;
}

以上是利用CSS的偽元素來實現的紅圈效果，利用定位屬性可以設置紅圈出現的位置。

最后附上一個使用紅圈的例子：

<ul>
<li><span class="circle"></span>提示1</li>
<li><span class="circle"></span>提示2</li>
<li><span class="circle"></span>提示3</li>
</ul>

以上是在無序列表中使用紅圈效果的例子，我們可以利用CSS實現更多不同的紅圈效果，讓頁面更加生動有趣。