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; /* 居中对齐 */
}