color(display-p3)需设备、系统、浏览器、页面配置四层全部就位才能生效，缺一则静默降级为srgb；常见失效原因包括硬件支持但系统策略关闭广色域、meta未置head顶部、@supports缺失或fallback顺序错误、background-color属性绕过色彩管理及p3值未专业转换。
不是所有“支持P3色域”的设备都能在网页中渲染 color(display-p3) —— 它需要硬件、系统、浏览器、页面配置四层全部就位，缺一即退化为 sRGB。
设备与系统层面：硬件支持 ≠ 渲染通道开启
iPhone 12 及更新机型、iPad Pro（2021起）、Mac Studio 等确实具备 Display P3 屏幕，但 iOS/macOS 是否启用广色域输出通道，还受系统策略控制：
-
window.matchMedia("(color-gamut: p3)").matches返回false，说明当前上下文未激活 P3 色彩管理，哪怕设备本身支持 - 企业 MDM 策略可能强制关闭广色域（尤其教育/政企部署的 iPad）
- iPadOS 某些版本需手动进入「设置 > 显示与亮度 > 广色域显示」确认开启（非默认项）
- macOS 上若使用 Rosetta 运行 Chrome，Metal 后端无法访问原生 P3 纹理格式，
color(display-p3)实际走 sRGB 回退
@supports + meta 缺一不可，顺序错误直接失效
@supports (color: color(display-p3 0 0 0)) 不是可选装饰，而是 Safari 的硬性准入开关；而 <meta name="color-scheme" content="light dark"> 是触发底层渲染管线的钥匙：
-
<meta>必须放在最顶部，早于所有 CSS 引入；晚于任何样式表，Safari 16.4+ 仍可能跳过 P3 渲染 - 仅写
@supports不够：旧版 Chrome（v116 前）或 Android WebView 即使匹配，也可能因系统未启用 P3 输出而静默降级 - 不提供显式 sRGB fallback（如
color: #FF6B6B），非支持环境会继承父级颜色或变透明，不是“发灰”，是“没颜色”
background-color 是最危险的使用场景
几乎所有移动端 WebKit 环境（iOS Safari、Android WebView）对 background-color: color(display-p3 ...) 支持极差，原因在于底层绘制常绕过色彩管理：
- 该属性在 iOS 和部分 Android WebView 中被直接映射到 sRGB 输出空间，
color(display-p3)声明形同虚设 - 改用
background-image: linear-gradient(color(display-p3 1 0 0), color(display-p3 1 0 0))—— 单色无角度渐变更大概率保留原始色域 - 避免用简写
background:覆盖前面定义的background-image；若需叠加，用background-color: transparent -
rgba()和color(display-p3)不共存，混用可能导致整条声明被跳过
P3 值必须专业转换，不能手算或瞎填
把设计稿里的 #FF6B6B 直接拆成 color(display-p3 1 0.42 0.42) 是典型错误 —— sRGB 与 Display P3 是两个不重叠的色域三角形，数值不能线性映射：
- Photoshop：启用
View > Proof Setup > Custom，Device 设为 “Display P3”，勾选 “Preserve Color Numbers”，再用吸管取色并复制 Display P3 坐标（小数三元组） - Figma：必须用插件（如 P3 Color Picker）或导出时明确选择 “Export as Display P3”，否则给的十六进制值根本不是 P3 坐标
- 参数只能是
0.0–1.0范围内的小数：color(display-p3 100% 42% 42%)或color(display-p3 255 107 107)都非法，会被浏览器忽略
真正决定是否渲染 P3 的，从来不是你写了什么值，而是渲染上下文有没有被激活 —— color-gamut: p3 声明、<meta> 位置、@supports 包裹、sRGB fallback 顺序、GPU 驱动能力，漏掉任何一环，用户看到的就不是“稍淡一点的红色”，而是彻底失焦的颜色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
