CSS實心圓點是網頁設計中常見的一個效果,可以用來表示列表項、標記和強調等。下面來看看如何使用CSS實現實心圓點。
/* CSS樣式代碼 */ .circle { width: 10px; height: 10px; border-radius: 50%; background-color: #000; } /* HTML代碼 */ <ul> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> </ul>
首先我們定義了一個名為“circle”的CSS類,它包含了實心圓點的樣式。其中,width和height分別定義了圓點的寬度和高度,border-radius設置為50%可以將方形元素變成一個圓形,background-color則定義了圓點的背景色。
接下來,在HTML中使用無序列表ul和列表項li來展示實心圓點。我們可以通過為li元素添加.circle類來實現圓點樣式,如下所示:
.circle { width: 10px; height: 10px; border-radius: 50%; background-color: #000; } ul li { list-style: none; padding-left: 20px; line-height: 1.5em; } ul li:before { content: "●"; font-size: 12px; color: #000; margin-right: 10px; }
以上為通過偽元素:before,設置圓點的方式,也可以達到效果。HTML中只需要保留ul和li標簽即可。
總之,實現實心圓點的方法比較靈活,我們可以根據具體需求來選擇不同的方法。