仅靠@media (color-gamut: p3)无法提升颜色艳丽度，它仅声明设备能力而非启用p3渲染；真正起效的是color(display-p3)且必须用@supports (color: color(display-p3 0 0 0))包裹检测，否则整条规则被浏览器静默忽略。
直接说结论：仅靠 @media (color-gamut: p3) 无法让颜色变艳丽，它只告诉浏览器“设备支持 P3”，但不触发 P3 渲染；真正起作用的是 color(display-p3)，且必须用 @supports 检测语法支持，否则整条规则被静默忽略。
为什么 @media (color-gamut: p3) 单独写没用
这个媒体查询只是设备能力声明，不是渲染开关。写了 @media (color-gamut: p3) { color: rgb(255, 0, 0); }，在 iPhone 14 Pro 上看到的仍是 sRGB 红——和普通手机一模一样。因为 rgb() 始终在 sRGB 色域内解析，浏览器不会自动把 sRGB 值映射到 P3 坐标。
常见错误现象：
-
@media (color-gamut: p3)里写background-color: #ff0000，真机上毫无色差提升 - 嵌套使用：
@media (color-gamut: p3) { @supports (color: color(display-p3 0 0 0)) { ... } }，反而增加解析失败概率 - 误以为匹配该查询就等于“已启用广色域”，结果 fallback 缺失，旧设备显示透明或黑色
@supports (color: color(display-p3 0 0 0)) 才是关键检测方式
这个检测验证的是 CSS 引擎能否识别 color(display-p3) 语法，而非设备是否带 P3 屏幕。Safari 16.3 及更早、Chrome ≤116、Firefox 全版本都会跳过整个块——不是报错，是彻底无视。
实操要点：
- 必须写全
color:前缀，@supports (color(display-p3 0 0 0))是非法的，会被当成无效条件 - 参数只能是三位小数，
color(display-p3 1.000 0.000 0.000)合法，color(display-p3 255 0 0)或color(display-p3 #ff0000)全部无效 - 不能省略空格，
color(display-p3 1 0 0)和color(display-p3 10 0 0)在 WebKit 下表现完全不同（后者直接解析失败）
background-color: color(display-p3) 极不稳定，优先改用渐变
iOS Safari 和多数 Android WebView 中，background-color 常绕过色彩管理，导致 color(display-p3 1 0 0) 显示成泛橙的灰红。这不是 bug，是底层绘制路径限制。
更可靠的写法：
- 用单色无角度渐变：
background-image: linear-gradient(color(display-p3 1 0 0), color(display-p3 1 0 0)) - 避免简写覆盖：
background:会清掉前面定义的background-image，要分开写或加background-color: transparent -
border-color、box-shadow等属性对color(display-p3)支持更弱，目前建议统一用linear-gradient替代测试
P3 值必须从专业工具导出，严禁手算转换
把设计稿里的 #FF6B6B 拆成 rgb(255, 107, 107) 再除以 255 得到 color(display-p3 1 0.42 0.42)，结果一定偏色。sRGB 和 Display P3 是两个不重叠的色域三角形，数值不能线性映射。
正确获取路径：
- Photoshop：View > Proof Setup > Custom → Device to simulate 选 “Display P3” → 勾选 “Preserve Color Numbers” → 吸管取色后右键复制 “Display P3” 值（小数三元组）
- Figma：必须用插件（如 P3 Color Picker）或导出时明确选择 “Export as Display P3”
- 命令行验证：
colorsync -i input.png -o output.p3.png -p "Display P3"
最后提醒一句：即使所有代码都对，如果页面不是 HTTPS、没在真机（iOS/macOS）上调试、或系统禁用了“广色域显示”，color(display-p3) 依然不会生效——这些运行时条件比 CSS 本身更难排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
