css制作圆点

使用 list-style-type 属性

通过设置无序列表 (<ul>) 的 list-style-type 为 disc，可以生成默认的黑色圆点。

ul {
  list-style-type: disc;
}

使用 ::before 伪元素

自定义圆点样式，通过伪元素添加内容并设置圆形背景。

li::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #000;
  border-radius: 50%;
  margin-right: 8px;
}

使用 border-radius 制作圆形

为任意元素（如 <span>）添加圆形样式，需设置宽高相等且 border-radius: 50%。

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #ff0000;
  border-radius: 50%;
}

使用 SVG 内联或背景

通过 SVG 代码或背景图实现高精度圆点。

.dot-svg {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><circle cx="5" cy="5" r="5" fill="%23000"/></svg>');
  width: 10px;
  height: 10px;
}