不支持 Display P3 的浏览器会静默丢弃 color(display-p3) 声明，必须用 @supports (color: color(display-p3 0 0 0)) 检测并前置 fallback；参数须为三位小数，P3 色值需专业工具导出，不可手算或在线转换。
不支持 Display P3 的浏览器会静默忽略 color(display-p3) 声明，导致颜色变透明、继承默认色或直接黑/灰——这不是报错，是整条 CSS 规则被丢弃。
必须用 @supports 包裹，且语法不能错
漏掉 color: 前缀、参数用整数或十六进制、括号不匹配，都会让整个 @supports 块被跳过：
-
@supports (color: color(display-p3 0 0 0))✅ 正确：测试的是 CSS 引擎能否解析该函数 -
@supports (color(display-p3 0 0 0))❌ 错误：缺少color:，整个块失效 -
@supports (color: color(display-p3 #FF0000))❌ 错误：十六进制不合法，参数必须是0.0–1.0范围内三位小数 -
@supports (color: color(display-p3 1 0 0))❌ 危险：Safari 16.3 及更早版本会因精度问题拒绝解析
fallback 必须在同一选择器内、声明在前
浏览器按声明顺序取值，不支持新语法时直接跳过该行，不会“自动 fallback”到下一行：
- ✅ 正确写法：
color: #FF6B6B; color: color(display-p3 1 0.42 0.42); - ❌ 错误写法：
color: color(display-p3 1 0.42 0.42); color: #FF6B6B;（旧浏览器看不到第二行） - ❌ 错误写法：
@media (color-gamut: p3) { color: color(display-p3 1 0.42 0.42); }（没 fallback，sRGB 屏直接失效） - ⚠️ 注意：
var(--primary)里不能直接写color(display-p3)，否则变量整条被忽略，--primary变成未定义
background-color 最不可靠，优先改用 background-image
background-color: color(display-p3 ...) 在 iOS Safari 和多数 Android WebView 中常被强制映射回 sRGB，视觉上严重褪色或泛橙：
立即学习“前端免费学习笔记（深入）”；
- ✅ 更可靠写法：
background-image: linear-gradient(color(display-p3 1 0 0), color(display-p3 1 0 0)); - ✅ 同时加
background-color: transparent;避免简写覆盖 - ❌ 不要写
background: color(display-p3 1 0 0);—— 会清掉前面的background-image - ⚠️
border-color、box-shadow等属性对color(display-p3)支持更弱，实测失败率高于background-color
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”
- ❌ 不要用在线转换工具或手动计算：它们多数基于错误的矩阵假设，结果偏色明显
- ⚠️ 参数只能是三位小数，如
0.980 0.350 0.350；0.98 0.35 0.35或0.9800 0.3500 0.3500均可能触发解析失败
最易被忽略的一点：即使设备支持 P3、系统开启广色域、页面走 HTTPS，只要父元素用了 transform、opacity 或 filter，整层叠上下文就会强制回退到 sRGB 渲染——这时 @supports 仍为 true，但颜色已不生效。
