在 CSS 中,實心圓點可以通過偽元素::before
或::after
來創建。為了創建一個實心圓點,可以執行以下步驟:
/* 設置容器類,如列表項 */ li { position: relative; /* 設置相對定位 */ list-style: none; /* 隱藏默認的列表樣式 */ } /* 創建實心圓點 */ li::before { content: ''; position: absolute; /* 設置絕對定位 */ top: 50%; /* 將圓點垂直居中 */ left: -20px; /* 根據需要調整圓點的水平位置 */ transform: translateY(-50%); /* 將圓點上下居中 */ width: 10px; /* 設置圓點的大小 */ height: 10px; background-color: black; /* 設置圓點的顏色 */ border-radius: 50%; /* 將圓點變成實心 */ }
在上述代碼中,我們首先為列表項設置了相對定位,然后隱藏了默認的列表樣式。接著,我們使用::before
偽元素來創建實心圓點。通過設置偽元素的content
屬性為空字符串,我們允許偽元素出現在列表項的內容之前。然后,我們設置偽元素的絕對定位,并將其調整到列表項的左側。我們還使用transfom
屬性將圓點垂直居中,并設定圓點的大小和顏色。最后,我們使用border-radius
屬性將圓點的邊框半徑設為 50%,從而將圓點變成實心。
上一篇div 變圓角
下一篇css實現動態拖拽效果