如何在linear-gradient中使用currentColor实现左侧进度条效果

嘿，这个问题其实很容易解决，核心就是利用currentColor的继承特性，再结合RGBA的透明度来实现。

首先，你需要给你的进度条容器设置color属性，这个颜色就是你想要的进度条主色调——因为currentColor会自动继承这个值。然后把原来的rgba(255,255,255,.1)替换成rgba(currentColor, 0.1)，这样进度条的背景就变成了主色调的半透明版本，而推进的部分直接用currentColor就能保持颜色统一。

给你个具体的代码示例参考：

<div class="progress" style="--progress: 65%"></div>

.progress {
  width: 300px;
  height: 24px;
  /* 这里设置进度条的主颜色，currentColor会继承它 */
  color: #3498db;
  /* 用currentColor的半透明版本做背景，替代原来的rgba(255,255,255,.1) */
  background: rgba(currentColor, 0.1);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.progress::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--progress);
  /* 推进的进度条直接使用currentColor，保持颜色统一 */
  background: currentColor;
  transition: width 0.4s ease-in-out;
}

这样调整后，你只需要修改.progress的color属性，就能一键改变整个进度条的颜色风格，背景的淡色也会自动跟着变化，完美替代原来固定的白色半透明背景。

另外要注意，rgba(currentColor, alpha)这种写法在现代浏览器都支持，如果你需要兼容非常老的浏览器（比如IE11及以下），那可能需要用其他方案，但现在大部分场景下这个写法完全够用啦。

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