CSS中實現實心圓點的方法有很多,其中使用偽元素: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元素的樣式初始化,去掉默認的列表樣式和padding、margin。
接著,在每個li元素前使用偽元素:before來插入實心圓點。通過content屬性為空字符串來為偽元素增加內容。使用display: inline-block將偽元素變為行內塊元素,使其可以位于li元素前。設置寬高和邊距使其成為一個正圓,并使用background-color屬性設置圓點的顏色。最后,使用border-radius: 50%將圓點的邊框半徑設置為50%,使其成為一個完整的實心圓點。
以上就是使用CSS實現實心圓點的代碼。通過這種方式,我們可以輕松地給列表等元素增加實心圓點的樣式,讓頁面更加美觀。