如何用 CSS 实现四个圆圈之间的动态虚线连接（自适应间距）-html教程-PHP中文网

如何用 CSS 实现四个圆圈之间的动态虚线连接（自适应间距）

本文详解如何使用伪元素和相对定位，为垂直排列的四个带圆圈的矩形容器添加贯穿式虚线连接，解决线条中断、首项被截断等常见布局问题，并提供可维护、响应式的实现方案。

本文详解如何使用伪元素和相对定位，为垂直排列的四个带圆圈的矩形容器添加贯穿式虚线连接，解决线条中断、首项被截断等常见布局问题，并提供可维护、响应式的实现方案。

在构建流程图、步骤引导或时间轴类 UI 时，常需将多个圆形节点沿垂直方向排列并用虚线连接。但直接硬编码线条高度（如 height: 8em）极易导致连接断裂——因为实际间距由 .rectangle 的 height、margin 和 .circle 的位置共同决定，静态值无法随布局变化自适应。

核心思路是：将连接线从 .circle::after 移至 .rectangle::before，并利用容器自身尺寸计算连线长度。这样线条高度可基于 100% + margin 动态生成，确保精准贯穿相邻圆心。

以下是优化后的完整实现：

body {
  display: flex;
  justify-content: center;
  /* 移除 align-items: center —— 避免首项被截断 */
  margin: 0;
  background-color: #e0e0e0;
  min-height: 100vh; /* 替代 height: 100vh，防止内容溢出 */
  overflow-y: auto;
}

.quatre-rectangles {
  width: 50%;
  position: relative;
}

.rectangle {
  height: 19em;
  --rectangle-margin: 1.5em; /* 统一控制间距，便于后续调整 */
  margin: var(--rectangle-margin) 0;
  background-color: #fef1f2;
  border-radius: 40px;
  padding: 1em;
  box-sizing: border-box;
  position: relative;
  display: flex;
  justify-content: center;
}

/* 为每个非末尾矩形添加向下延伸的虚线 */
.rectangle:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 100%;           /* 起点：紧贴当前矩形底部 */
  left: 50%;
  width: 0;
  /* 高度 = 下一个矩形的上边距 + 当前矩形自身高度的一半（对齐圆心） */
  height: calc(var(--rectangle-margin) + 50%);
  border-left: 4px dotted #41be54;
  transform: translateX(-50%);
  z-index: 1;
  opacity: 0.6;
}

.circle {
  width: 3em;
  height: 3em;
  background-color: #41be54;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 1.5em;
  font-family: 'Lexend Deca', sans-serif;
  z-index: 2; /* 确保圆圈压在虚线上方 */
  margin-top: 1em;
}

✅ 关键改进说明：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

删除 align-items: center：原代码中 body { align-items: center } 会强制所有内容垂直居中，当总高度超过视口时，顶部矩形被向上推移并裁剪。改用 min-height: 100vh + overflow-y: auto 更健壮；
连线锚点升级：.rectangle:not(:last-child)::before 以当前矩形底部为起点（top: 100%），高度设为 calc(var(--rectangle-margin) + 50%)，即「下一项上边距 + 半个矩形高」，自然对齐下一个圆心纵向位置；
统一间距变量：通过 --rectangle-margin 控制所有间距，修改一处即可全局生效，大幅提升可维护性；
层级优化：.circle 的 z-index: 2 确保其始终显示在虚线之上，避免视觉遮挡。

? 注意事项：

若矩形高度不固定（如内容高度变化），建议改用 flex 布局配合 gap 属性替代 margin，并用 ::after 在 .rectangle 内部绝对定位更稳妥；
虚线颜色透明度（opacity: 0.6）可依设计规范微调，避免过淡影响可读性；
如需支持深色模式，可将 #41be54 替换为 CSS 自定义属性（如 --accent-color），便于主题切换。