lab()透明度仅支持“/”语法，逗号写法失效；颜色插值仍在srgb进行；@property不支持lab()；兼容性需前置同名fallback或@supports校验；d50/d65白点差异需校准。
lab() 透明度必须用 / 语法，逗号写法直接失效
浏览器对 lab() 的透明度解析非常严格：只认空格 + / 分隔，其余写法全被静默丢弃。比如 lab(50% 20 -10, 0.4) 看起来像 rgba() 风格，但整条声明会被忽略，元素最终用继承色或默认色渲染——DevTools 里这条规则甚至不会显示为划掉，而是直接消失。
正确写法只有两种形式：lab(L a b / alpha) 或 lab(L a b / alpha%)，其中 alpha 是 0–1 小数，alpha% 是 0%–100% 百分比。注意 60% 和 0.6 在语义上等价，但部分构建工具（如 PostCSS 插件）可能在解析百分比时出错，建议优先用小数。
透明度生效 ≠ 颜色插值在 Lab 空间进行
写了 color: lab(53.2% -0.4 1.2 / 0.6)，颜色能显示、透明度也起作用，但这不代表过渡或混合发生在 Lab 空间。CSS 动画和渐变仍强制转成 sRGB 后线性插值：
-
transition: color 0.3s;→ 中间帧是 sRGB 插值结果，Lab 的感知均匀性完全丢失，容易发灰或跳变 -
background: linear-gradient(lab(50% 20 -10 / 1), lab(30% 40 5 / 0.5));→ 两端先转成 RGB，再做渐变，Lab 值只是“输入”，不是“运算空间”
@property 不支持 lab()，动态控制需绕道
@property 的 syntax: "<color>"</color> 实际只识别传统色值（rgb()、hsl()、十六进制等），遇到 lab() 会降级为字符串类型，无法参与动画或计算：
@property --c { syntax: "<color>"; inherits: false; initial-value: lab(50% 20 -10 / 0.8); }</color> → 这个自定义属性根本不会被当作颜色处理，color: var(--c); 渲染失败。
替代方案只有两个：
- 改用
hsl()或rgb()定义变量，靠现代浏览器对hsl(h s l / a)的原生支持实现透明度分离 - JS 手动读取
getComputedStyle后转换为 Lab 值再注入，适合一次性配置，不适合高频更新
兼容性兜底必须显式前置同名声明，且不能依赖 @supports
Firefox 116 及更早版本、旧 Edge、所有 IE 完全不识别 lab()，关键点在于：它不是“忽略该值、保留前一个声明”，而是“跳过整条 CSS 规则”。所以这种写法是错的：
color: rgba(128, 128, 128, 0.6);<br>color: lab(53.2% -0.4 1.2 / 0.6);→ Firefox 中这两行都会被跳过，文字用默认色（通常是黑色）。
正确做法是确保 fallback 声明与 lab() 同名、同优先级、且能被旧引擎识别：
- 把
lab()放在后面，前面必须有同属性的可解析声明，例如：color: #808080; color: lab(53.2% -0.4 1.2 / 0.6); - 更稳妥的做法是用
@supports (color: lab(0% 0 0))包裹增强样式，避免不支持时触发布局偏移或样式断裂 - 设计工具导出的 Lab 值常基于 D50 白点，而 CSS 默认用 D65，直接照搬会导致明度/色相偏移；加透明度后偏差更难调试，建议用
colorjs.io校准
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
