CSS3的出現(xiàn)，使頁面的樣式設(shè)計(jì)更加豐富多彩。其中，li（列表）元素中的小圓點(diǎn)樣式也得到了很大的升級(jí)。

/* 定義小圓點(diǎn)樣式 */
li {
list-style: none; /* 隱藏原有的序號(hào)或符號(hào) */
position: relative; /* 絕對(duì)定位需要使用父元素相對(duì)定位 */
padding-left: 20px; /* 增加左側(cè)留白 */
line-height: 1.5; /* 行高與文字對(duì)齊 */
}
li:before {
content: ''; /* 偽元素生成實(shí)體 */
display: block; /* 將偽元素轉(zhuǎn)換成塊元素 */
width: 10px; /* 寬高一致，可根據(jù)需求進(jìn)行修改 */
height: 10px;
border-radius: 5px; /* 邊框半徑等于寬高的一半，可以生成具有圓形效果的小圓點(diǎn) */
background-color: #000; /* 背景顏色可根據(jù)需求進(jìn)行修改 */
position: absolute; /* 相對(duì)于li元素進(jìn)行定位 */
top: 50%; /* 將小圓點(diǎn)置于文本的中心位置 */
left: 0; /* 將小圓點(diǎn)與文本左對(duì)齊 */
transform: translateY(-50%); /* 將小圓點(diǎn)上下居中 */
}

通過以上代碼，我們可以很容易地實(shí)現(xiàn)小圓點(diǎn)樣式。需要注意的是，在多級(jí)嵌套的列表中使用時(shí)，子元素的padding-left值應(yīng)該根據(jù)層級(jí)逐漸遞增，以免樣式錯(cuò)位。

在日常開發(fā)中，這種小圓點(diǎn)樣式常常用于制作產(chǎn)品列表、網(wǎng)站菜單等。相比于傳統(tǒng)的“列表小黑點(diǎn)”，這種圓形圖標(biāo)更加精致、美觀，也更符合現(xiàn)代UI設(shè)計(jì)的風(fēng)格。通過巧妙的利用CSS3特性，我們可以實(shí)現(xiàn)更多炫酷的頁面效果，提升用戶的瀏覽體驗(yàn)。