如何在 html 进度标签上应用线性渐变答案

【问题标题】：how to apply linear-gradient on html progress tag如何在 html 进度标签上应用线性渐变
【发布时间】：2018-03-08 10:58:13
【问题描述】：

我正在尝试将线性渐变属性应用于 html 进度条标记。这就是视觉效果的样子

这是进度标签的 jsfiddle

https://jsfiddle.net/nick1111/3bLgLr9h/6/

<div><progress max="100" value="85" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" tabindex="-1 ></progress></div>

.horizontal-gradient {
  background: linear-gradient(to left, blue, white);
}

我尝试为渐变创建一个 css 类，但不确定如何在进度条标签上应用它。

【问题讨论】：

标签： html css

【解决方案1】：

您需要定位:progress-bar 和:progress-value。像这样的：

progress {
  border: 0;
  background: #eee;
  border-radius: 100px;
}

progress::-moz-progress-bar {
  border-radius: 100px;
  background: linear-gradient(to right, rgba(33, 177, 89, .1), rgba(33, 177, 89, 1));
}

progress::-webkit-progress-bar {
  background: #eee;
  border-radius: 100px;
}

progress::-webkit-progress-value {
  border-radius: 100px;
  background: linear-gradient(to right, rgba(33, 177, 89, .1), rgba(33, 177, 89, 1));
}

&lt;div&gt;&lt;progress color="#8ccc62" max="100" value="85" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" tabindex="-1"&gt;&lt;/progress&gt;&lt;/div&gt;

【讨论】：

感谢@sol 的回答。
是否可以对用户作为输入传递的颜色应用线性渐变。但是我们不能为所有颜色创建类，因为用户可以传递任何颜色。在我的 CSS 中，我有 background-color: currentColor;但我不明白如何将 currentColor 与线性渐变一起使用。有什么想法吗？

【解决方案2】：

正如您在样式代码中看到的，您必须使用 ::-webkit-progress-value 作为值背景，并使用 ::-webkit-progress-bar 作为进度标签的背景

progress {  
    /* Important Thing */
    -webkit-appearance: none;
    border: none;
}
progress::-webkit-progress-bar {
    background: lightgray;
}
progress[value="65"]::-webkit-progress-value{

background: #dafcd6; /* Old browsers */
background: -moz-linear-gradient(left, #dafcd6 0%, #57c64f 65%); 
background: -webkit-linear-gradient(left, #dafcd6 0%,#57c64f 65%);
background: linear-gradient(to right, #dafcd6 0%,#57c64f 65%);

}

【讨论】：