color()函数必须明确指定色空间（如display-p3），漏写或拼错将导致整条声明被丢弃；rec2020等虽在规范中但浏览器尚未支持，display-p3是当前唯一可用广色域选项。
color() 函数不指定空间就等于没写
浏览器解析 color() 时，color-space 参数不是可选的——漏写或写错名称（比如拼成 displayp3 或 p3），整个声明会被直接丢弃，连降级都不触发。这不是容错逻辑，是 CSS 解析器的硬性规则。
常见错误现象：color(1 0 0)、color(p3 1 0 0)、color(display-p3-2022 1 0 0) 全部无效；color(display-p3 1 0 0) 才是唯一被识别的合法形式。
为什么必须明确？因为同一组数值（比如 1 0 0）在不同色域里代表完全不同的物理颜色：在 srgb 中是标准红，在 display-p3 中是更饱和的电影红，在 rec2020 中甚至可能超出当前屏幕能显示的范围。不声明空间，浏览器根本不知道该拿哪套“坐标系”去解码。
display-p3 是目前唯一能用的广色域 CSS 色空间
display-p3 是当前唯一有稳定支持的广色域选项；rec2020 和 a98-rgb 虽然写在 CSS Color 4 规范里，但截至 2026 年 5 月，Chrome、Firefox、Safari 都不解析它们——写了等于注释，还会导致后续同条声明被跳过。
使用场景很具体：只在需要提升红色/绿色饱和度的 UI 元素上才值得用，比如品牌按钮高光、图片滤镜叠加层、视频播放器控制条。普通文字、边框、背景大面积使用反而容易在非 P3 屏上显得突兀或偏色。
性能与兼容性影响：
-
display-p3在 Safari 16+ 完整支持；Chrome 111+ 默认启用，但需确认chrome://flags/#css-color-adjust未被禁用 - Firefox 当前仅在
about:config中手动开启layout.css.color-functional-notation.enabled才能生效 - 所有浏览器都支持
@supports (color: color(display-p3 0 0 0))检测，这是唯一靠谱的运行时判断方式
别指望 rec2020 在网页里起作用
rec2020 的理论色域比 display-p3 更宽，尤其在青绿区域，但它面向的是 UHDTV 和专业监看设备。消费级屏幕几乎无人能完整覆盖，主流浏览器也压根不实现——color(rec2020 0 0.5 1) 这种写法在任何已发布版本中都不会渲染出 rec2020 蓝。
容易踩的坑：
- 误以为写了
rec2020就能“提前适配未来”，实际只是让当前样式表多了一段无效代码 - 在同一个元素上混用
color(display-p3 ...)和color(rec2020 ...)，后者失效会导致整条声明被丢弃，前面的 display-p3 也跟着失效 - 把
rec2020和显示器 ICC 配置文件混淆，试图用color-profile绑定，但该属性根本不在 CSS 标准中，浏览器忽略
透明度写法和 fallback 必须分开处理
color() 的透明度必须写在斜杠后，如 color(display-p3 0.6 0.6 0 / .3)；写成 rgba() 形式（如 color(display-p3 0.6 0.6 0) / 0.3）会解析失败。
fallback 不是靠逗号或空格自动降级，而是靠层叠顺序：
- 先写
background-color: #FF6B6B - 再写
background-color: color(display-p3 1 0.42 0.42)
这样，不支持 color() 的浏览器会取第一个有效声明，支持的则覆盖为 P3 色。不能写成 color(display-p3 1 0.42 0.42, #FF6B6B)——语法错误，整条作废。
真正容易被忽略的点：P3 色值在 sRGB 屏上不是“变灰”，而是被浏览器按当前设备默认空间强行映射，结果可能偏黄、偏青、甚至失真；所以关键品牌色务必在真机多屏实测，不能只信设计稿预览。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
