如何在线性渐变中使用`currentColor`答案

【问题标题】：How to use `currentColor` in linear-gradient如何在线性渐变中使用`currentColor`
【发布时间】：2018-03-12 16:01:53
【问题描述】：

我想使用currentColor 从左侧显示进度条进度。

在下面的示例中，我使用了进度条的background，而不是进度条的实际颜色。

https://jsfiddle.net/nick1111/tc4r0net/13/

progress[value] {
  /* Reset the default appearance */
  -webkit-appearance: none;
  appearance: none;
  width: 250px;
  height: 20px;
}

progress::-webkit-progress-value {
  background: linear-gradient(to left, currentColor, rgba(255, 255, 255, .1));
}

<div style="color:green;">
  <div>
    <progress value="80" max="100">70 %</progress>
  </div>
</div>

如何使用 currentColor 代替 rgba(255,255,255,.1) ？

谢谢

【问题讨论】：

你不能。 currentcolor 意味着......没有任何修改/不透明等，
什么意思，怎么用？您为进度定义颜色，只需将 rgba(255,255,255,.1) 替换为 currentColor
@Huangism 如果我用 currentColor 替换 rgba，那么它不会显示从左到右的颜色渐变。我想展示的是进度条，从相同的浅色开始，慢慢地变成亮色。
请检查更新的问题。进度条以一点点颜色开始
你不能单独使用CSS来做到这一点，如果你使用LESS或SASS，可以使用currentColor来实现（我认为）。如果您只是使用 css，那么您需要定义至少一种颜色，开始或结束，并将另一种定义为 currentColor

标签： html css linear-gradients

【解决方案1】：

你可以试试这样的。这个想法是使用两个渐变来模拟这种行为：

progress[value] {
  /* Reset the default appearance */
  -webkit-appearance: none;
  appearance: none;
  width: 250px;
  height: 20px;
}

progress::-webkit-progress-value {
  background: 
  linear-gradient(to left, transparent, rgba(128,128,128,0.9)), 
  linear-gradient(currentcolor, currentcolor);
}

<div style="color:blue;">
  <div>
    <progress value="80" max="100">70 %</progress>
  </div>
</div>
<div style="color:green;">
  <div>
    <progress value="80" max="100">70 %</progress>
  </div>
</div>
<div style="color:white;">
  <div>
    <progress value="80" max="100">70 %</progress>
  </div>
</div>

【讨论】：

@jose1221 我更新了我的答案，你可以看看;)