CSS里的圓圈常常用于列表或導航中，可以用作Bullet Point或者indicator。 在CSS中，我們可以通過幾種方法創建圓圈，以下是三種最常見的方法。

/*方法1-使用border-radius屬性創建圓圈 */
.circle1{
width: 20px;
height: 20px;
border-radius: 50%; /*將border-radius設置成50%可以使盒子變成圓形*/
background-color: red;
}
/*方法2-使用偽元素before來創建圓圈 */
.circle2{
width: 20px;
height: 20px;
position: relative;
background-color: green;
}
/*加上偽元素before，并設置border-radius為50%，就可以實現圓圈效果 */
.circle2:before{ 
width: 20px;
height: 20px;
position: absolute;
content: "";
border-radius: 50%;
background-color: white;
}
/*方法3-使用Unicode字符來創建圓圈 */
.circle3{
font-size: 18px; 
color: blue;
line-height: 1; /*設置行高為1可以保證文字垂直居中*/ 
}
/*在CSS中使用Unicode字符的方法是用content屬性引用該字符 */
.circle3:before{
content: "\2022"; /*\2022表示Unicode編碼的圓圈符號*/
margin-right: 5px; /*為了讓字符離前面的文本有一定距離，可以加上margin-right */ 
}

以上三種方法都可以創建出漂亮的圓圈。但在實際開發中，建議使用第一種方法，因為這種方法最簡單、性能最好，而且不需要額外的元素。