如何使用HTML/CSS创建带有固定全局渐变的圆角进度条

当前实现的渐变效果不对，本质原因是：CSS的线性渐变默认会完全铺满应用该背景的元素自身的尺寸。你的渐变是写在.progress-bar-indicator（进度指示器）上的，所以不管指示器的宽度是20%、50%还是80%，渐变都会从红到蓝完整铺在指示器的自身宽度里，就会出现小宽度进度条也能显示到蓝色段的问题，和“渐变锚定整个容器宽度”的目标不符。

方案1：最小改动适配现有代码结构（无额外HTML元素） #

这个方案只需要调整现有CSS，不需要修改HTML结构，兼容性最好。
改动逻辑：强制让指示器上的渐变尺寸和容器总宽度保持一致，让渐变的锚定范围从“指示器自身宽度”改成“和容器等宽”，这样不管指示器宽度占比多少，可见区域的渐变色彩都会和容器全宽的色彩位置完全对齐。

改动后的完整CSS：

.progress-bar-container {
  width: 500px;
  height: 50px;
  margin: 50px 0;
  background: black;
  /* 把容器宽度抽成CSS变量，后续调整宽度不需要重复写值 */
  --bar-full-width: 500px;
}

.progress-bar-indicator {
  height: 100%;
  background-image: linear-gradient(to right, red, green, blue);
  /* 强制渐变总宽度和容器等宽，不再跟随指示器自身宽度缩放 */
  background-size: var(--bar-full-width) 100%;
  /* 确保渐变起始点和容器左边缘对齐，无偏移 */
  background-position: left top;
  border-radius: 25px;
}

#indicator-1 {
  width: 80%;
}

#indicator-2 {
  width: 50%;
}

#indicator-3 {
  width: 20%;
}

这个方案实现的效果：

• 渐变从容器最左边缘的红色开始，到最右边缘的蓝色结束，位置完全固定
• 指示器的圆角效果完全正常，不会被渐变影响
• 如果后续要调整容器宽度，只需要修改--bar-full-width这一个变量，所有进度条的渐变对齐会自动同步

方案2：无固定宽度适配（响应式场景可用） #

如果需要进度条是响应式宽度、不写死固定值，可以用「容器铺全宽渐变 + 同色遮罩块」的结构实现，完全不需要写死渐变尺寸。
这个方案的核心是之前你尝试过的遮罩思路的正确打开方式：

1. 把全宽渐变直接设置在进度容器上，渐变范围自动铺满整个容器宽度
2. 进度指示器本身设置为完全透明，保留自身的圆角样式
3. 在指示器右侧加一个和容器背景同色的遮罩块，盖住未填充区域的渐变

对应的HTML结构调整：

<div class="progress-bar-container">
  <div class="progress-bar-indicator" id="indicator-1"></div>
  <!-- 新增遮罩块，盖住右侧未填充的渐变区域 -->
  <div class="progress-bar-mask"></div>
</div>

<div class="progress-bar-container">
  <div class="progress-bar-indicator" id="indicator-2"></div>
  <div class="progress-bar-mask"></div>
</div>

<div class="progress-bar-container">
  <div class="progress-bar-indicator" id="indicator-3"></div>
  <div class="progress-bar-mask"></div>
</div>

对应的CSS代码：

.progress-bar-container {
  width: 100%; /* 可以灵活调整宽度，不需要固定值 */
  height: 50px;
  margin: 50px 0;
  /* 容器直接铺全宽渐变 */
  background: linear-gradient(to right, red, green, blue);
  /* 用flex布局让指示器和遮罩块自动分配宽度，不需要手动算遮罩尺寸 */
  display: flex;
}

.progress-bar-indicator {
  height: 100%;
  /* 指示器完全透明，透出下面容器的渐变 */
  background: transparent;
  border-radius: 25px;
}

.progress-bar-mask {
  /* 自动占满容器除了指示器之外的剩余宽度 */
  flex: 1;
  height: 100%;
  /* 遮罩颜色和容器未填充区域的背景保持一致 */
  background: black;
}

#indicator-1 {
  width: 80%;
}

#indicator-2 {
  width: 50%;
}

#indicator-3 {
  width: 20%;
}

这个方案的优势是完全适配响应式宽度，不需要算固定尺寸，指示器的圆角效果完全不受遮罩影响——因为遮罩块是从指示器的右边缘开始覆盖的，不会遮挡指示器的圆角区域。

• 调整background-attachment不生效：这个属性的作用是把背景相对于视口固定，不是相对于父容器锚定，自然没法适配容器的尺寸
• 遮罩方案没法加圆角：之前的实现大概率是把指示器和遮罩合并成了同一个元素，没有把带圆角的透明指示器和独立的遮罩块拆分，才会导致圆角被遮罩遮挡。

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