CSS里的圓圈常常用于列表或?qū)Ш街校梢杂米鰾ullet Point或者indicator。 在CSS中，我們可以通過(guò)幾種方法創(chuàng)建圓圈，以下是三種最常見(jiàn)的方法。

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

以上三種方法都可以創(chuàng)建出漂亮的圓圈。但在實(shí)際開(kāi)發(fā)中，建議使用第一種方法，因?yàn)檫@種方法最簡(jiǎn)單、性能最好，而且不需要額外的元素。