color(display-p3)生效需同时满足设备硬件支持（iphone 12+/ipad pro）、系统开启广色域、页面渲染上下文启用p3色彩管理三条件，缺一则降级为srgb显示。
直接写 color(display-p3 1 0 0) 不会自动启用广色域——它只是个声明，是否生效取决于设备、系统、渲染上下文和兜底逻辑是否全部就位。
为什么 color(display-p3) 在 Chrome 或 Android 上没反应
Chrome 当前（v125）仅在 macOS 上有限支持 display-p3，且需同时满足：页面匹配 @media (color-gamut: p3)、未触发 sRGB 强制合成（如无 transform、opacity、filter）、系统启用广色域显示。Windows/Linux 下该函数会被静默降级为 sRGB，连警告都不报。
- 用
window.matchMedia("(color-gamut: p3)").matches在控制台验证是否匹配——返回false就别指望它工作 - Android WebView 和绝大多数安卓浏览器完全不识别
display-p3，写了等于注释 - Safari 16.4+ 是目前唯一稳定支持的环境，且仅限 iOS 16.4+ / macOS Ventura+ 设备
如何正确写出可用的 color(display-p3) 值
参数必须是 P3 色域下的线性归一化三元组（0.0–1.0），不是从 sRGB 换算来的数字，也不是十六进制或百分比。
- 错误写法：
color(display-p3 #FF6B6B)、color(display-p3 255 107 107)、color(display-p3 100% 42% 42%)—— 全部被忽略或降级 - 正确来源：Photoshop 中开启 Display P3 校样 → 吸管取色 → 右键复制 “Display P3” 值（小数）；或 Figma 插件导出 P3 坐标
- 值超出范围（如
1.2）会被截断，color(display-p3 1.2 0.3 0.1)实际等价于color(display-p3 1 0.3 0.1)
为什么 background-color: color(display-p3 ...) 总是发灰
因为 background-color 渲染路径在多数浏览器中绕过广色域色彩管理，尤其当父元素有合成属性时，整层叠上下文强制回退到 sRGB。
- 改用
background-image: linear-gradient(color(display-p3 1 0 0), color(display-p3 1 0 0))—— 单色无角度渐变更大概率保留 P3 色域 - 避免在
opacity、filter: blur()、transform: translateZ(0)的容器里设 P3 背景 - 别依赖
rgba()fallback：它和color(display-p3)不共存，整个声明可能被跳过
必须加的兼容性兜底和检测
不加 @supports 和媒体查询，color(display-p3) 在旧浏览器里就是无效声明，元素颜色可能意外透明或继承。
- 用
@supports (color: color(display-p3 0 0 0))包裹 P3 样式，否则 Safari 16.3 及更早版本直接跳过整条规则 - HTML 必须含
<meta name="color-scheme" content="light dark">，某些 iOS Safari 版本不触发 P3 渲染，除非明确声明暗色模式支持 - 始终提供 sRGB fallback：
background-color: rgb(255, 0, 0); background-color: color(display-p3 1 0 0);—— 后者覆盖前者，但旧浏览器只认前者
真正难的不是写对语法，而是确认当前设备是否上报了 color-gamut: p3、渲染管线是否允许 P3 输出、以及设计师给的数值是不是真 P3 坐标——这三个条件漏一个，颜色就回到 sRGB 世界里去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
