meter标签颜色由min、max、low、high、optimum五属性组合决定：optimum所在区间为绿色，最近邻区间黄色，最远区间红色；value仅在跨区间时变色，且optimum默认为(min+max)/2。
meter 标签的颜色变化由哪些属性决定
浏览器对 meter 的颜色渲染完全依赖于 min、max、low、high 和 optimum 这五个属性的组合关系，不是 CSS 控制的，也不是 JS 主动赋值的。你改 background-color 或 color 对进度条本体无效——那些只影响 fallback 文字。
关键逻辑是：先用 low 和 high 把 [min, max] 切成三个区间：[min, low)、[low, high]、(high, max]；再看 optimum 落在哪一段，那一段就是绿色区间；离它最近的相邻段为黄色，最远的为红色。
optimum 在不同区间时的实际颜色映射
别靠猜，直接按 optimum 所在位置分三种情况处理：
- 如果
optimum∈[min, low)：则[min, low]显示绿色，(low, high]黄色，(high, max]红色 - 如果
optimum∈[low, high]：则[low, high]绿色，[min, low)和(high, max]都是黄色 - 如果
optimum∈(high, max]：则[high, max]绿色，[low, high)黄色，[min, low)红色
注意闭开区间细节：比如 optimum=29、low=30，那绿色区间就是 [min, 30]（含 30），不是 [min, 29]。
立即学习“前端免费学习笔记（深入）”；
为什么改了 value 却没变色
常见原因是 value 没跨过区间边界，或者 optimum 设置得离所有边界都太远。例如：
<meter value="45" min="0" max="100" low="30" high="70" optimum="25">45</meter>
这里 optimum=25 属于 [min, low)，绿色区间是 [0, 30]，所以 value=45 落在 (30, 70] → 黄色；但如果你把 value 改成 28，它就进绿色区间了。
容易忽略的点：
-
optimum默认值是(min + max) / 2，不显式写就容易误判区间归属 -
low和high必须满足min ≤ low ≤ high ≤ max，否则行为未定义（多数浏览器会静默忽略或降级为默认样式） - 某些旧版 Safari 对
optimum的区间判断有偏差，建议在目标环境实测
如何调试 meter 的当前区间状态
没有原生 API 返回“当前属于哪个区间”，只能靠逻辑推导。推荐在开发时加一层 JS 辅助判断：
function getMeterZone(value, min, max, low, high, optimum) {<br> if (value <= low) return 'low';<br> if (value <= high) return 'mid';<br> return 'high';<br>}<br>function getOptimumZone(optimum, min, max, low, high) {<br> if (optimum < low) return 'low';<br> if (optimum <= high) return 'mid';<br> return 'high';<br>}
然后比对两个返回值，就能预判颜色。上线后可移除，纯靠属性配置驱动。
真正难的不是写对属性，而是让产品同学理解：这个绿色不是“正常”，而是“和 optimum 同区间”；红色不是“错误”，只是“离 optimum 最远”。一旦业务规则变，optimum 得跟着重算，而不是只调 low/high。
