CSS进度条激活态星形图标被边框裁切如何修复

云原生阿岚

2026-8-28

问题原因

星形被裁切是两个细节问题导致的，完全不需要重写组件：

步骤节点.progress-step只设置了宽度，没配相等的高度，本身不是标准正圆，且节点实际尺寸比星形图标小一圈
直接把星形设为激活节点的背景时，背景默认只在节点区域内绘制，超出圆形范围的部分自然被裁切，加上没做缩放和居中，图标本身也存在偏移

最小修复方案

只需要调整对应CSS，不动HTML结构、不影响已经调好的其他进度条样式：

给.progress-step补上和宽度一致的高度，把节点固定为正圆
不要把星形直接挂在节点的background上，改用激活态的伪元素加载星形，设置比节点稍大的尺寸，居中定位在节点上方，加高z-index避免被进度条或节点遮挡
给星形背景设置center/100% 100%的适配规则，让图标刚好撑满伪元素区域，不会偏移

注意：所有原有类的其他属性全部保留，只需要新增/修改下面列出的属性即可，不会破坏现有样式

直接替换原有代码里的两个对应类即可，其他CSS全部保留不用动：

.progress-step {
  width: 1.1875rem;
  height: 1.1875rem; /* 补全等宽高度，固定正圆节点 */
  background-color: #999999;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.progress-step-active {
  background-color: #01539c; /* 节点本身保留激活态蓝色底，和进度条颜色统一 */
  position: relative; /* 给伪元素提供定位基准 */
}
.progress-step-active::after {
  content: "";
  position: absolute;
  width: 1.5rem; /* 可自行调整大小，值越大星形显示越大 */
  height: 1.5rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 完美居中对齐节点 */
  background: url(https://i.ibb.co/2y8twZL/star.png) center/100% 100% no-repeat;
  z-index: 3; /* 提高层级，避免被进度条、节点遮挡 */
}