必须显式写三段式声明，color(srgb)是堵住safari隐式映射的关键屏障：第一段#ff6b6b保底，第二段color(srgb 1 0.4196 0.4196)强制锁定srgb路径，第三段color(display-p3 ...)仅在支持设备生效且须用@supports包裹。
必须显式写三段式声明，且第二段用 color(srgb) 锁定渲染路径——只靠 #RRGGBB 或 rgb() 作 fallback 会失效，Safari 可能把它当 P3 上下文里的 sRGB 值重新映射。
为什么不能只写 color: #FF6B6B; color: color(display-p3 0.98 0.42 0.42);
浏览器对 color(display-p3) 是“全有或全无”处理：不支持时整条声明被忽略，连前面的 #FF6B6B 都不会生效；更危险的是，Safari 会把未声明空间的十六进制值（如 #FF6B6B）在 P3 上下文中隐式重解释，导致颜色偏移。你看到的不是“稍暗的红”，而是继承色、透明或完全错位的色相。
color(srgb) 是必须存在的中间层
它不是可选项，是堵住 Safari 隐式映射行为的关键屏障：
-
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:覆盖渐变
最容易被忽略的点：所有图片资源也得同步走 sRGB 工作流，否则 CSS 写得再准，背景图和图标仍是断裂的。Figma 导出必须勾选“嵌入色彩配置文件”并设为 sRGB，否则切图自带 P3 元数据，浏览器照单全收。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
