仪表标签HTML 5的反向最优属性

Question

希望有人能帮忙，但是为了我想要的目的，我正在使用HTML5表标签，但是它看起来很奇怪，它的‘最佳’属性的工作方式，即红色时，低，绿色时，高

它会代表一个垃圾桶的水平，所以当它高的时候，我想让它在低的时候表现出红色和绿色。

当分配给米标签时，是否有逆转最优属性的功能？

谢谢，威尔

Answer 1

目前还不清楚您到底在寻找什么，但是我为您创建了以下绿色的，直到它超过了high值，在它变成红色之前

/* HTML */
<meter min="0" low="" optimum="50" high="90" max="100" value="70"></meter>

/* CSS */
/* vv Crucial, this will disable the default styling */
meter { -webkit-appearance: none; -moz-appearance: none; appearance:none; } 

meter::-webkit-meter-bar { /* Color of background */
    background: #acacac;
}
meter::-webkit-meter-optimum-value { /* Color within low-high range */
    background: green;
}
meter::-webkit-meter-suboptimum-value { /* Color outside low-high range */
    background:red;
}

Demo (专门为webkit制作)

如果你真的想要一个从绿色到红色的渐变，你可以用这样的方法

background: -webkit-linear-gradient(left, lightgreen 0%, red 100%);
background: linear-gradient(to right, lightgreen 0%, red 100%);