CSS小圓點(diǎn)是在網(wǎng)頁(yè)中用來(lái)進(jìn)行標(biāo)注和指示的常見(jiàn)元素，它不僅可以美化網(wǎng)頁(yè)，還可以為用戶提供更好的視覺(jué)體驗(yàn)。那么，CSS小圓點(diǎn)怎么寫(xiě)呢？接下來(lái)，將為大家介紹CSS小圓點(diǎn)的相關(guān)知識(shí)和寫(xiě)法。

ul li {
list-style: none; /*去掉默認(rèn)的列表符號(hào)*/
position: relative;
padding-left: 20px; /*用于留出空間來(lái)放置小圓點(diǎn)*/
}
ul li::before {
content: ""; /*插入空的內(nèi)容*/
display: block; /*將偽元素設(shè)為塊級(jí)元素*/
position: absolute;
left: 0;
top: 50%; /*將圓點(diǎn)定位在列表項(xiàng)中垂直居中的位置*/
width: 10px;
height: 10px;
margin-top: -5px; /*將圓點(diǎn)向上偏移一半高度，使其實(shí)現(xiàn)垂直居中*/
background-color: #000; /*設(shè)置圓點(diǎn)的顏色*/
border-radius: 50%; /*將圓點(diǎn)設(shè)置為圓形*/
}

上述代碼中，我們首先將ul li的列表默認(rèn)樣式去掉，然后給每個(gè)li添加一個(gè)偽元素:before，這個(gè)元素是真正的小圓點(diǎn)。在:before偽元素中，通過(guò)設(shè)置position:absolute和top:50%，使其定位在列表項(xiàng)中間上下居中的位置，然后通過(guò)設(shè)置margin-top:-5px將其向上偏移一半高度，實(shí)現(xiàn)完全的垂直居中。設(shè)置height和width的值，同時(shí)設(shè)置background-color和border-radius，使這個(gè)偽元素呈現(xiàn)出小圓點(diǎn)的樣式。

當(dāng)然，如果你想要實(shí)現(xiàn)不同顏色、大小或形狀的小圓點(diǎn)，以上代碼只需稍加修改即可。總之，CSS小圓點(diǎn)的寫(xiě)法極其簡(jiǎn)單易懂，適合初學(xué)者使用。希望本文對(duì)大家的學(xué)習(xí)有所幫助！