color(display-p3)需用@supports包裹且参数为0.0–1.0三位小数，不可手算转换；必须配合<meta>、color-gamut声明及真机测试，background-image渐变比background-color更可靠。
必须用@supports (color: color(display-p3 0 0 0))包裹声明
单独写color: color(display-p3 1 0 0)在 Safari 16.3 及更早、Chrome ≤116、Firefox 全版本中会被整条忽略，元素可能变透明或继承默认色。这不是语法错误，是浏览器根本不识别该函数。
关键点：
-
@supports测试的是 CSS 引擎能否解析该语法，不是设备能力；漏掉color:前缀（如写成@supports (color(display-p3 0 0 0))）会导致整个块被跳过 - 参数必须是三位小数三元组，
@supports (color: color(display-p3 #FF0000))或@supports (color: color(display-p3 255 0 0))均非法 - 不能嵌套在
@media (color-gamut: p3)里——叠加反而增加失效概率
color(display-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" - 参数只能是 0.0–1.0 范围内的浮点数，三位小数足够（如
0.98 0.35 0.35），整数、百分比、十六进制全部无效
background-color用color(display-p3)最不稳定，优先改用background-image
background-color: color(display-p3 1 0 0)在 iOS Safari 和多数 Android WebView 中常被绕过色彩管理，直接映射到 sRGB 输出空间，看着像褪色的红或泛橙的灰。
实测更可靠的写法：
- 用单色无角度渐变：
background-image: linear-gradient(color(display-p3 1 0 0), color(display-p3 1 0 0)) - 避免简写覆盖：
background:会清掉前面定义的background-image，要分开写或设background-color: transparent叠加 - 别指望
rgba()自动 fallback —— 它和color(display-p3)不共存，整个声明可能被跳过 - border-image、box-shadow 等非纯色场景，P3 支持更不可靠，建议优先用
linear-gradient()测试
HTML 和运行时必须协同激活渲染上下文
即使语法全对、值也准，color(display-p3)仍可能静默降级为 sRGB。根本原因是渲染上下文没被真正启用。
缺一不可的硬性条件：
-
<meta name="color-scheme" content="light dark">必须放在<head>最顶部，早于所有 CSS 引入 - CSS 中需显式声明
html { color-gamut: p3; }（哪怕只是占位） - JS 动态响应时，不能只依赖
window.matchMedia("(color-gamut: p3)").matches：先调CSS.supports("color", "color(display-p3 0 0 0)")，再查matchMedia，两者都为 true 才可注入 - iOS Safari 在页面加载后首次调用
matchMedia可能返回 false，需在DOMContentLoaded后延迟 10ms 再查
color(display-p3)却没在 macOS 或 iOS 真机上测（Windows/Linux 不走 display-p3 渲染路径），或者页面没启用硬件加速（比如没设transform: translateZ(0)），导致整个渲染链路被强制降级。 
