CSS中實(shí)現(xiàn)實(shí)心圓點(diǎn)的方法有很多,其中使用偽元素:before和content屬性是比較常見的一種方式。
ul { list-style: none; padding: 0; margin: 0; } ul li::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 5px; background-color: black; border-radius: 50%; }
以上代碼中,首先我們先將ul元素的樣式初始化,去掉默認(rèn)的列表樣式和padding、margin。
接著,在每個li元素前使用偽元素:before來插入實(shí)心圓點(diǎn)。通過content屬性為空字符串來為偽元素增加內(nèi)容。使用display: inline-block將偽元素變?yōu)樾袃?nèi)塊元素,使其可以位于li元素前。設(shè)置寬高和邊距使其成為一個正圓,并使用background-color屬性設(shè)置圓點(diǎn)的顏色。最后,使用border-radius: 50%將圓點(diǎn)的邊框半徑設(shè)置為50%,使其成為一個完整的實(shí)心圓點(diǎn)。
以上就是使用CSS實(shí)現(xiàn)實(shí)心圓點(diǎn)的代碼。通過這種方式,我們可以輕松地給列表等元素增加實(shí)心圓點(diǎn)的樣式,讓頁面更加美觀。