fallback必须写在color(display-p3)前且同选择器内，否则旧浏览器会丢弃整条声明；@supports不能包裹变量定义，background-color最不稳定，P3值须专业工具导出，不可手算。
直接写 fallback 颜色在 color(display-p3) 前面，且不能用 @supports 包裹变量定义——否则旧浏览器会丢掉整条声明。
fallback 必须写在同选择器内、同一属性的前一行
浏览器解析 CSS 是从上到下逐行进行的。遇到不认识的 color(display-p3)，整条声明会被跳过，但不会影响前面已声明的值。所以顺序不能反：
-
color: #FF6B6B;—— 所有浏览器都认 -
color: color(display-p3 0.98 0.35 0.35);—— 仅 Safari 16.4+ 在 P3 设备上生效
如果反过来，旧版 Chrome 或 Android WebView 会忽略第二行，但第一行仍有效；反过来写就全丢了。
@supports 只能包裹规则块，不能包裹 :root 变量定义
很多人想这么写：
立即学习“前端免费学习笔记（深入）”；
@media (color-gamut: p3) {
:root { --primary: color(display-p3 1 0.42 0.42); }
}
这会导致 sRGB 屏幕上也继承这个值，而它在非 Safari 中根本无效，最终可能渲染为黑色或透明。正确做法是：
- 先在
:root里定义保底：--primary: #FF6B6B; - 再用
@media (color-gamut: p3)覆盖，但只覆盖给支持它的环境 - 更稳妥的写法是叠加
@supports：@supports (color: color(display-p3 0 0 0)) and (color-gamut: p3)
background-color 是最不稳定的使用场景
即使 color(display-p3) 在 color 或 border-color 中勉强可用，background-color 在 iOS Safari 和多数 WebView 中仍大概率被强制映射回 sRGB，结果发灰、偏棕。
- 改用单色无角度渐变：
background-image: linear-gradient(color(display-p3 0.98 0.35 0.35), color(display-p3 0.98 0.35 0.35)); - 显式设
background-color: transparent;避免简写覆盖 - 别混用
background简写和background-image，否则会清掉渐变
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.0–1.0 范围内的小数，
color(display-p3 100% 0% 0%)或color(display-p3 255 0 0)全部非法
真正卡住效果的往往不是代码写错，而是没放 <meta name="color-scheme" content="light dark"> 在 最顶部，或者用户系统禁用了广色域显示。
