纯CSS点状步骤条可用flex布局+伪元素实现：.step::before画圆点，相邻步间::after绘连线，移动端通过@media切flex-direction: column并隐藏连线，圆点用固定像素宽高+border-radius: 50%确保正圆。
怎么用纯 CSS 实现点状步骤条（无 JS）
点状步骤条本质是「状态可枚举、顺序固定、视觉需对齐」的线性流程展示，纯 CSS 完全能搞定，关键在
布局 +
伪元素画圆点 +
控制连线长度。不需要任何 JS 就能响应式对齐，也不依赖第三方库。
常见错误是直接用
堆圆点，结果连线断开、移动端错位、当前步样式卡顿——根本原因是没把「点」和「线」拆成独立可控制的层。
每个步骤用一个
display: flex::beforeflex: 1
包裹，内部只放文字，不放圆点或线
圆点统一用
.step::before
生成，设
content: ""
+
width/height/border-radius
连线用相邻步骤之间的
::after
伪元素（或额外
），宽度靠
flex: 1
自适应
当前步激活态只改
.step.active::before
的
background-color
和
transform: scale(1.2)
，避免重排
如何让点状步骤条在移动端自动堆叠（不换行错乱）
点太多时，
flex
默认会压缩圆点间距甚至重叠，尤其 iOS Safari 对
flex-basis: 0
处理不稳定。真正可靠的方案是「断点切换布局方向」，而不是强行缩放字体或圆点。
核心逻辑：小屏下把
flex-direction: row
切成
column
，同时隐藏连线（因为竖排时连线意义弱），保留圆点+文字垂直对齐。
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
PC 端：
.steps { flex-direction: row; } .step::after { content: ""; width: 100%; height: 2px; }
移动端（
@media (max-width: 768px)
）：
.steps { flex-direction: column; align-items: flex-start; } .step::after { display: none; }
圆点垂直居中用
.step { position: relative; } .step::before { position: absolute; left: -30px; top: 50%; transform: translateY(-50%); }
务必加
min-width: 0
到
.step
，防止 Flex 子项在窄屏下溢出容器
Vue/React 中动态渲染点状步骤条要注意什么
框架里最常踩的坑不是样式，而是「状态驱动圆点样式时，key 没对齐导致动画错乱」或「异步加载步骤数据后，activeIndex 更新但 DOM 未重绘」。
比如 Vue 里用
v-for
渲染步骤，如果
:key
写成
index
，插入新步骤时所有后续节点 key 变更，圆点动画会集体重播；React 里若用
useState
更新
activeStep
但没触发 re-render，则
active
class 根本不会加上。
Vue：
v-for="(step, i) in steps" :key="step.id || i"
，优先用唯一业务 ID，不用纯索引
React：确保
activeStep
是受控状态，且每次更新都走
setState
，不要直接改数组索引
所有圆点激活态必须用 class 切换（如
:class="{ active: i === activeStep }"
），别用内联
style
覆盖伪元素
如果步骤数据异步获取，初始
activeStep = 0
但数据为空数组，要加
v-if="steps.length"
或
{steps.length > 0 && ...}
避免渲染空步骤
为什么
border-radius: 50%
有时画不出正圆？
伪元素画圆点时，
width
和
height
必须严格相等，否则
border-radius: 50%
会拉成椭圆。这问题在使用
em
、
rem
或百分比单位时极易发生，尤其当父元素
font-size
动态变化时。
另一个隐蔽原因是
line-height
或
vertical-align
干扰了伪元素的盒模型计算，导致高度被撑开。
强制正圆：用
width: 12px; height: 12px;
（固定像素值），避免相对单位
如果必须用相对单位，统一用
min-width: 1em; min-height: 1em;
+
box-sizing: border-box;
检查父元素是否设置了
line-height: 1.5
类似值，给伪元素加
line-height: 1;
重置
调试技巧：临时加
outline: 1px solid red;
到
.step::before
，看实际盒尺寸是否方正
点状步骤条看着简单，但圆点对齐、连线伸缩、跨端堆叠、框架响应这四块，任意一块没压住就会在某个机型或数据状态下突然崩形。最稳妥的做法是：PC 端用 Flex 横排 + 伪元素画点/线，移动端切列布局并收掉连线，所有尺寸用 px 锁死，状态切换只动 class 不碰 style。