当前位置：首页 > CSS

css制作圆点

2026-02-27 07:59:21CSS

使用列表样式制作圆点

在HTML中使用无序列表<ul>和<li>标签，通过CSS的list-style-type属性直接生成圆点：

<ul class="circle-dots">
  <li>项目一</li>
  <li>项目二</li>
</ul>

.circle-dots {
  list-style-type: disc; /* 默认值即为实心圆点 */
}

通过伪元素自定义圆点

当需要更灵活控制圆点样式时，可以清除列表默认样式并用::before伪元素创建自定义圆点：

css制作圆点

.custom-dots {
  list-style: none;
  padding-left: 20px;
}
.custom-dots li::before {
  content: "•";
  color: #ff5722; /* 圆点颜色 */
  font-size: 1.2em; /* 圆点大小 */
  padding-right: 10px;
}

使用border-radius绘制圆形

对于非列表元素（如<div>或<span>），可以通过CSS绘制圆形：

css制作圆点

.circle {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #333;
  margin-right: 8px;
}

调整圆点间距与对齐

通过padding和line-height控制圆点与文字的间距和对齐：

.aligned-dots li {
  line-height: 1.6;
  padding-left: 1em;
  text-indent: -0.7em;
}
.aligned-dots li::before {
  content: "•";
  padding-right: 0.5em;
  vertical-align: middle;
}

动画圆点效果

为圆点添加脉冲动画效果：

.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4CAF50;
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}