CSS progress() 怎样把容器宽度映射为渐变进度

响应式组件常见一个小问题：同一条进度条放进不同宽度的卡片后，宽度和颜色需要一起变化，但旧写法往往在多个地方重复计算“当前值位于最小值和最大值之间的百分比”。CSS 的 progress() 函数可以把这层计算收拢成一个无单位比例，再交给 width、opacity 或颜色函数消费。最实用的形态是 progress(value, start, end)，其中三个参数必须属于可比较的同一数值类型。

先把组件的三个尺寸输入整理好

先明确“当前值、区间起点、区间终点”分别是什么。对一个随容器变化的组件，可以把容器宽度视为当前值，把 min-width 与 max-width 的设计值保存为自定义属性。这样，比例层只负责回答一个问题：当前宽度走完了这段区间的多少。

.panel {
  /* 这三个值保持同为长度类型，便于 progress() 比较。 */
  --width-now: 68vw;
  --width-min: 320px;
  --width-max: 960px;
  width: var(--width-now);
  min-width: var(--width-min);
  max-width: var(--width-max);
}

真实项目中，--width-now 可以由布局上下文或脚本写入；本文只讨论 CSS 如何消费这三个值，不把某个测量方案当成唯一入口。关键是不要把 320、960px 和百分比混成无法比较的类型。

用 progress() 建立唯一的比例层

函数形式是 progress(value, start, end)，计算逻辑可以理解为 (value - start) / (end - start)。当当前宽度位于区间中间时，返回值也位于 0 和 1 之间。它返回的是无单位数字，所以要用于百分比宽度时，再乘以 100%。

.panel {
  /* 把尺寸区间统一成一个可复用的无单位比例。 */
  --width-progress: progress(
    var(--width-now),
    var(--width-min),
    var(--width-max)
  );
}

.panel__meter {
  /* progress() 返回数字，乘以 100% 才得到宽度。 */
  width: calc(var(--width-progress) * 100%);
}

这层拆分的价值在于：组件后面要增加颜色、透明度或缩放时，只引用 --width-progress，不再复制一串起点、终点和当前值。复杂组件可以把比例看成稳定的“架构接口”：上游提供尺寸，下游只消费归一化结果。

让同一个比例同时驱动长度和颜色

只改变进度条宽度，通常还不够。窄容器可以用冷色提示空间紧凑，接近最大宽度时再逐渐转为暖色。下面的写法让同一个比例同时参与长度和颜色通道计算；这里的颜色只是示意，重点是避免两套独立的百分比计算。

.panel__meter {
  /* 同一个比例同时控制长度和颜色，减少重复公式。 */
  width: calc(var(--width-progress) * 100%);
  background: rgb(
    calc(40 + 180 * var(--width-progress))
    calc(120 + 80 * var(--width-progress))
    220
  );
  /* 让短组件仍保持可辨识，不把透明度降到不可读。 */
  opacity: calc(0.65 + 0.35 * var(--width-progress));
}

如果项目使用相对颜色语法或渐变函数，可以继续把比例作为输入；但要注意 progress() 只返回数字，最终属性仍要得到合法的百分比、长度或颜色通道。把比例集中命名，也方便设计系统后续更换颜色映射而不碰尺寸计算。

越界、单位和兼容性要单独做取舍

默认情况下，progress() 会把结果夹到 0 到 1。当前值小于起点时得到 0，大于终点时得到 1，这很适合进度条和颜色强度。只有当设计确实需要表达“超出区间多少”时，才使用 no-clamp；否则外溢比例可能把宽度或颜色推到预期范围之外。

.panel {
  /* 默认夹取适合普通进度条，越界时不继续放大。 */
  --safe-progress: progress(
    var(--width-now),
    var(--width-min),
    var(--width-max)
  );

  /* 只有需要表达超区间幅度时才显式取消夹取。 */
  --raw-progress: progress(
    no-clamp var(--width-now),
    var(--width-min),
    var(--width-max)
  );
}

三个参数的类型也要一致：三个无单位数字可以比较，三个长度可以比较，三个百分比可以比较；时间、长度和无单位数字混用会让函数无效。由于 progress() 属于较新的 CSS 数值能力，基础布局应先用固定宽度、普通百分比或已有渐变保证可用，再用特性查询包住增强声明。

.panel__meter {
  /* 不支持新函数时，先保留一个可读的静态进度。 */
  width: 50%;
  background: #2f80ed;
}

@supports (width: calc(progress(50, 0, 100) * 100%)) {
  .panel__meter {
    /* 支持时再切换到按容器区间计算的比例。 */
    width: calc(var(--safe-progress) * 100%);
  }
}

常见问题

progress() 返回的是百分比吗？

不是，它返回无单位数字。用在宽度上通常写成 calc(progress(...) * 100%)，用在透明度或颜色计算时则按目标属性需要组合。

为什么三个参数写了不同单位后不生效？

函数需要比较同一数值类型。长度之间、百分比之间或无单位数字之间可以形成有意义的区间，长度与时间等不同类型混用就不能计算。

什么时候应该使用 no-clamp？

只有下游确实需要知道当前值已经越过起点或终点时才使用。普通进度条、强度和颜色插值一般保留默认夹取，避免越界结果传到视觉属性。