color()函数语法错误会导致声明被静默丢弃；必须严格满足三要素：标准色彩空间名（如display-p3）、0–1归一化数值、空格分隔，且须用@supports检测并配fallback。
color()函数写法错误会导致整条声明被丢弃
浏览器对color()语法极其严格，任何参数缺失、拼写错误或值域越界，都不会报错，而是直接跳过该行 CSS —— 你看到的“没效果”，大概率是声明被静默丢弃了。比如color(displayp3 1 0 0)（漏短横）、color(p3 1 0 0)（非标准空间名）、color(display-p3 255 0 0)（数值未归一化）全都不生效，DevTools 里会标为“invalid value”，但控制台不提示。
必须写全三要素：色彩空间 + 归一化数值 + 正确空格
color()不是可选语法糖，它强制要求三个部分同时存在且格式精准：
- 色彩空间名必须完全匹配规范：仅
srgb、display-p3、rec2020、a98-rgb被定义，但截至 2026 年 8 月，只有srgb和display-p3在 Safari 17.4+/Chrome 125+（需 flag）中有实际解析行为；其他如rec2020写了也白写 - 数值必须是 0–1 范围内的浮点数，不能是整数、百分比或带单位：
color(display-p3 1 0 0)✅，color(display-p3 255 0 0)❌，color(display-p3 100% 0% 0%)❌ - 各参数之间**只能用空格分隔**，不能有逗号、括号内换行或多余空格：
color(display-p3 0.8 0.2 0.3)✅，color(display-p3, 0.8, 0.2, 0.3)❌
@supports检测不是可选项，是保命手段
不加@supports就直接写color(display-p3 ...)，等于把 fallback 权交给了浏览器层叠顺序——而很多旧版 Safari 或所有 Firefox 版本会把整条规则块都忽略，导致文字变黑或继承透明色。正确做法是：
- 先写通用 fallback：
color: #ff4d88; - 再用
@supports (color: color(display-p3 0 0 0))包裹 P3 声明，确保只在真正支持的环境生效 - 注意：这个检测语句本身不能省略参数值，
@supports (color: color(display-p3))无效，必须带完整三元组
别信“看起来有效”，真机+P3屏+HTTPS才是验证底线
Safari 桌面版即使版本达标，color(display-p3)在file://协议或非 HTTPS 页面下也绝不会触发广色域渲染；macOS 系统设置里若关闭“广色域显示”，或者 iOS 辅助功能中启用了“色彩滤镜”，同样失效。更关键的是：Safari 开发者工具里的颜色拾取器永远只显示 sRGB 近似值，不反映真实 P3 输出。唯一可信验证方式是——在 iPhone 12+ 或 iPad Pro（2021+）真机上，用系统“放大镜”辅助功能里的颜色检测器实测输出值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
