meter颜色由optimum决定分段语义：optimum所在区间为绿色，相邻为黄色，最远为红色；low和high必须成对出现且满足min<low<high<max，否则退化为无色条。
low和high必须成对出现且满足数值约束
单独写 low="40" 或只设 high="80"，浏览器会直接忽略这两个属性，meter 退化为无色条（通常是浅灰或默认绿）。真正启用三段式颜色逻辑的前提是：四个值严格满足 min < low < high < max。任意一环断裂——比如 min="0" low="0"、high="100" max="100"、或 low="70" high="50"——整个分段机制就失效。
常见踩坑点：
-
low和high必须是数字，不能是字符串（如low="forty"无效） - 若
min="0" max="100"，则low="30"合法，但low="-5"或low="120"会被静默忽略 - Firefox 和 Chrome 对边界值（如
value === low）判定略有差异，不要依赖精确相等
optimum 决定哪一段是绿色，不是 value 决定
很多人以为“value 落在 low 和 high 之间就自动黄”，其实不是。optimum 才是颜色语义的“锚点”：它落在哪一段，那一段就是绿色；相邻段黄色；最远段红色。例如：
<meter value="65" min="0" max="100" low="40" high="80" optimum="25">65%</meter>
立即学习“前端免费学习笔记（深入）”；
这里 optimum="25" 属于第一段 [0, 40)，所以 [0, 40] 是绿色，(40, 80] 黄色，(80, 100] 红色——而 value="65" 正好落在黄色段，整条显示黄色。
想让 40–60% 是绿色？不能只调 low="40" high="60"，必须同步设 optimum="50"，否则绿色段可能错位到别处。
value 变色只发生在跨区间时，不是随数值线性渐变
meter 的颜色是离散切换的，不是 CSS 渐变那种连续过渡。只有当 value 从一个区间跳到另一个区间时，颜色才突变。例如：
-
value="39"和value="40"在low="40"下可能属于不同段（注意闭开区间细节） - 若
optimum="50"且low="40" high="60"，那么value="39"→ 红色，value="40"→ 绿色，value="61"→ 红色 - value="50" 和 value="55" 都在绿色段，颜色完全一样，不会因更接近 optimum 而变深
这也是为什么改了 value 却没看到颜色变化——它可能还没跨过 low 或 high 的数值边界。
样式定制不可靠，优先用伪元素或降级方案
你无法用普通 CSS 类或 background-color 直接控制 meter 的填充色。所有视觉干预必须走浏览器私有伪元素，比如：
::-webkit-meter-bar { background: #eee; }
::-webkit-meter-optimum-value { background: green; }
::-webkit-meter-suboptimum-value { background: yellow; }
::-webkit-meter-even-less-good-value { background: red; }
但 Firefox 不支持这些伪元素，Edge 已弃用部分语法，兼容性极差。生产环境建议：用 div + ARIA + JS 动态 class 模拟 meter 行为，把颜色逻辑收归自己控制，同时保留 meter 作为语义 fallback。
真正容易被忽略的是：optimum 默认值是 (min + max) / 2，不显式写出就容易误判区间归属；而 low/high 错一位，整条就失去语义色彩——这不是 bug，是规范强制要求的严谨性。
