css圆点怎么制作

使用列表样式

通过 list-style-type 属性可以快速为无序列表（<ul>）添加圆点样式。

ul {
  list-style-type: disc; /* 实心圆点（默认） */
}

可选值包括 circle（空心圆）、square（方块）等。

自定义伪元素

通过 ::before 伪元素和 content 属性实现更灵活的圆点设计。

.custom-dot::before {
  content: "•"; /* Unicode 圆点符号 */
  color: red;
  margin-right: 8px;
}

结合 font-size 和 color 可调整大小和颜色。

背景图或 SVG

使用 background-image 添加自定义图形。

.bg-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-image: url('dot.svg');
  background-size: contain;
}

适合需要复杂设计（如渐变、图案）的场景。

边框与圆角

通过 border-radius 创建圆形元素作为圆点。

.circle-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: blue;
}

调整 width 和 height 可控制圆点尺寸。

结合 Flexbox 布局

对齐圆点与文本时，Flexbox 能简化布局。

.dot-container {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dot {
  /* 上述任意圆点样式 */
}

适用于需要精确控制间距的情况。