oklch()悬停调亮度必须严格写对单位，否则整条声明静默失效；l须用%或0–1、c为无单位小数、h不加deg，只改l值可确保不偏色，且@supports检测需带单位并置于fallback色之后。
oklch() 悬停调亮度必须写对单位，否则整条失效
浏览器不会报错，但写错一个单位就跳过整条 background-color: oklch(...) 声明——按钮直接回退到上一条颜色（比如 #2563eb），你根本看不出悬停变化。最常踩的坑是：oklch(60 0.28 258.5)（L 缺 %）、oklch(60% 28% 258.5)（C 误用百分比）、oklch(60% 0.28 258.5deg)（H 加 deg 在 Safari 16.x 崩溃）。安全写法只有两种：oklch(60% 0.28 258.5)（全兼容），或 oklch(0.6 0.28 258.5)（仅 Chrome 112+/Firefox 121+/Safari 17.4+ 支持，且 H 小数位建议 ≤1）。
悬停时只改 L，别碰 C 和 H，否则偏色不是“避免”而是“必然”
OKLCH 的 L 是感知亮度标度（0 = 黑，1 = 白），只要保持 C 和 H 完全不变，只动 L，就不会发生色相漂移——这不是技巧，是空间建模决定的。例如基础态 oklch(62% 0.28 258.5)，悬停写成 &:hover { --l: 52%; } 再配合 background-color: oklch(var(--l) 0.28 258.5);，蓝调始终稳定。反例：oklch(52% 0.22 258.5) 同时降 C，会发灰；oklch(52% 0.28 259) H 微调 0.5°，在高饱和下可能触发人眼敏感区偏移。
@supports 必须显式包裹，且 fallback 色写在块外上方
只靠两行声明：background-color: #2563eb; + background-color: oklch(62% 0.28 258.5);，在部分安卓 WebView 中会彻底失效——它可能跳过所有后续规则。正确结构强制要求：
button {
background-color: #2563eb;
}
@supports (color: oklch(0% 0 0)) {
button {
background-color: oklch(62% 0.28 258.5);
}
button:hover {
background-color: oklch(52% 0.28 258.5);
}
}
注意三点：@supports 检测值必须带单位（0% 不可省）；不能用 @supports not（WebView 解析异常）；绝对不要用 oklab() 替代检测（所有主流浏览器目前都返回 false）。
深色模式和禁用态要分策略，L 和 C 不能混着调
悬停只是第一步，真正容易被忽略的是：深色模式适配和禁用态处理必须解耦。深色模式下，从 oklch(62% 0.28 258.5) → oklch(38% 0.28 258.5)，只降 L，蓝调不变；禁用态则应固定 L（甚至略提 0.01–0.02 防对比度过低），只降 C（如 0.28 → 0.12），否则文字在浅底上突然变暗，可读性断崖下跌。混用策略会导致视觉节奏断裂——比如深色模式里禁用按钮又降 L 又降 C，结果既发灰又发暗，完全失去状态辨识度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
