css制作圆点
使用 list-style-type 属性
在无序列表 (<ul>) 中，通过 CSS 的 list-style-type 属性可以快速将列表项标记设置为圆点。默认值通常已经是圆点，但可以显式声明：
ul {
list-style-type: disc; /* disc 表示实心圆点 */
}使用伪元素 ::before
如果需要更灵活地自定义圆点（如调整颜色、大小或位置），可以通过伪元素实现：
.custom-dot {
list-style: none; /* 移除默认样式 */
padding-left: 1em; /* 调整缩进 */
}
.custom-dot li::before {
content: "•"; /* Unicode 圆点字符 */
color: red; /* 颜色 */
font-size: 1.2em; /* 大小 */
margin-right: 0.5em; /* 与文本间距 */
}使用 border-radius 绘制圆点
通过 border-radius: 50% 可以将任意元素变为圆形，适合非列表场景：
.circle-dot {
width: 10px;
height: 10px;
background-color: black;
border-radius: 50%; /* 关键属性 */
display: inline-block;
}使用 SVG 或图标字体
对于高精度控制的圆点，可以使用 SVG 或图标字体（如 Font Awesome）：
.svg-dot {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle cx="5" cy="5" r="5" fill="%23000"/></svg>');
width: 10px;
height: 10px;
}调整圆点与文本对齐
若圆点与文本垂直对齐异常，可通过 vertical-align 修复：
.inline-dot {
vertical-align: middle; /* 居中对齐 */
}
