low和high必须同时存在且满足范围约束才能触发颜色变化；单独设置low="30"或high="70"无效，浏览器静默忽略；仅当min≤low＜high≤max时颜色才生效。
low 和 high 必须同时存在且满足范围约束才能触发颜色变化
单独写 low="30" 或 high="70" 不会改变颜色——浏览器静默忽略。只有当 min ≤ low 全部显式设置时，<code><meter></meter> 才开始划分语义区间。
常见失效场景：
-
min="0" max="100" low="30"缺high→ 无分段，全条中性色 -
low="80" high="50"（顺序反了）→ 浏览器不报错但降级为默认样式 -
min="0" max="100" low="120" high="130"→ 超出[min, max]，被忽略
value 必须落在 [min, low]、[low, high] 或 [high, max] 区间内才变色
颜色不是靠“跌破 low”或“冲破 high”触发的，而是看 value 落在哪个闭区间里。比如：
<meter value="25" min="0" max="100" low="30" high="70">25</meter> 中，value=25 属于 [min, low]（即 [0, 30]），此时 Chrome 渲染为红色背景；但若 value=30，就刚好卡在边界上，属于 [low, high]，变成黄色。
注意：value 超出 [min, max]（如 value="-5" 或 value="105"）会显示异常色（深红），此时 low/high 完全不参与判断。
optimum 决定哪一段是绿色，不是 value 接近它就绿
optimum 不是“目标值”，而是用来指定三个区间中哪一段该显示绿色。它只影响颜色映射逻辑，不改变 value 的位置。
例如：
-
optimum="20"且low="30"→ 绿色区间是[min, low]（即[0, 30]） -
optimum="50"且low="30" high="70"→ 绿色区间是[low, high]（即[30, 70]） -
optimum="90"→ 绿色区间是[high, max]（即[70, 100]）
很多人误以为设了 optimum="100" 就能让 value="95" 变绿，结果发现还是黄的——因为没确认 value 是否真落在 [high, max] 里。
Chrome 和 Firefox 对 low/high 的渲染差异极大
Chrome 按三段固定映射：[min, low] 红、(low, high) 黄、[high, max] 绿；Firefox 目前基本不响应 low/high/optimum，所有值都显示同一灰调背景。
这意味着：
- 依赖原生颜色变化做关键提示（如磁盘告警）时，Firefox 用户看不到效果
- 不能用
getComputedStyle(meter).backgroundColor判断当前状态——UA 样式不可读 - 生产环境必须搭配 CSS 伪元素或 JS class 控制颜色，
<meter></meter>只保留语义和 fallback 文字
真正稳定的方案是：用 <meter></meter> 表达语义，用 JS 根据 value 和阈值计算 class，再由 CSS 控制颜色。原生 low/high 更适合作为辅助语义标记，而非视觉控制主力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
