必须写三段式声明，因为两段无法同时解决“全有或全无”忽略和Safari隐式重映射双重风险：第一段#FF6B6B保底旧浏览器，第二段color(srgb)强制锁定sRGB路径防偏移，第三段color(display-p3)在@supports内安全启用广色域。
必须写三段式声明，且第二段用 color(srgb) 强制锁定解释路径——只靠 #RRGGBB 或 rgb() 会失效，Safari 可能把它当 P3 上下文里的 sRGB 值重新映射。
为什么 fallback 必须是三段，不能只写两段？
浏览器对 color(display-p3) 是“全有或全无”处理：不支持时整条声明被忽略，连前面的 #FF6B6B 都不会生效。更危险的是，Safari 会把未声明空间的十六进制值（如 #FF6B6B）在 P3 上下文中隐式重解释，导致颜色偏移——你看到的不是“稍暗的红”，而是继承色、透明或完全错位的色相。
-
color: #FF6B6B;—— 保底，旧浏览器仅认这一行 -
color: color(srgb 1 0.4196 0.4196);—— 强制锁定 sRGB 渲染路径，数值必须归一化（0xFF / 255 = 1，0x6B / 255 ≈ 0.4196），不能写整数或百分比 -
color: color(display-p3 0.98 0.42 0.42);—— 最后覆盖，仅在支持设备上生效
@supports 包裹不是可选，是生效前提
不加 @supports (color: color(display-p3 0 0 0))，Safari 16.3 及更早版本直接跳过整个规则块，fallback 彻底失效。但要注意：
- Chrome 和 Firefox 当前返回
false，所以它们永远走不到第三行，依赖前两行兜底 - 微信等 WebView 可能错误返回
true却静默降级，此时color(srgb)就是最后一道防线 -
@supports内部仍需保持三段顺序，不能省略color(srgb)
background-color 是最危险的使用点
它在 iOS Safari 和多数 Android WebView 中常绕过色彩管理，直接映射到 sRGB 输出空间，结果就是“发灰”或“偏橙”。正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 弃用
background-color: color(display-p3 ...); - 改用
background-image: linear-gradient(color(display-p3 0.98 0.42 0.42), color(display-p3 0.98 0.42 0.42)); -
background-color单独设为transparent或明确的 sRGB 值，避免简写background:覆盖渐变
最容易被忽略的环节在切图之前
即使 CSS 写对了，如果设计稿在 Display P3 下制作，导出 PNG 时没勾选「转换为 sRGB」，那图片里的 #ff0000 实际携带 P3 元数据，浏览器照单全收。此时你写的 color: #ff0000; 反而成了干扰项。Figma 导出必须勾选“嵌入色彩配置文件”并设为 sRGB，否则切图自带 P3 元数据，浏览器照单全收。
