如何用CSS创建直径4px、间距8px的圆形组成的虚线？

可以用CSS背景渐变快速实现这种效果，以下是具体方案：

水平线条实现 #

CSS代码 #

.dotted-circle-line {
  width: 300px; /* 可自定义线条长度 */
  height: 4px; /* 匹配圆形直径 */
  background-image: radial-gradient(circle, #333 2px, transparent 0);
  background-size: 12px 4px; /* 8px间距 + 4px直径 = 12px，高度与圆形直径一致 */
  background-repeat: repeat-x;
  background-position: center; /* 确保圆形垂直居中 */
}

HTML代码 #

<div class="dotted-circle-line"></div>

垂直线条实现 #

如果需要垂直方向的线条，只需调整参数：

.vertical-dotted-circle-line {
  width: 4px;
  height: 300px; /* 自定义线条高度 */
  background-image: radial-gradient(circle, #333 2px, transparent 0);
  background-size: 4px 12px; /* 8px间距 + 4px直径 = 12px，宽度与圆形直径一致 */
  background-repeat: repeat-y;
  background-position: center; /* 确保圆形水平居中 */
}

关键参数说明 #

• radial-gradient(circle, #333 2px, transparent 0)：绘制半径为2px（对应直径4px）的实心圆，超出2px的区域设为透明，形成单个圆形单元。
• background-size：控制每个重复单元的尺寸，宽度/高度设置为「圆形直径+间距」，保证圆形之间的间隔刚好是8px。
• background-repeat：设置为repeat-x（水平）或repeat-y（垂直），让圆形单元重复排列成线条。

内容的提问来源于stack exchange，提问作者Leeker