必须为 color(display-p3) 提供 fallback，否则旧浏览器完全忽略该声明；正确写法是先写 srgb 值再覆盖 display-p3 值，@supports 需包裹整条规则，background-color 的 display-p3 易降级，推荐用单色渐变替代，css 变量中不可直接定义 display-p3，需 js 结合媒体查询动态注入。
color(display-p3) 必须配 fallback，否则旧浏览器直接失效
直接写 color(display-p3 1 0.42 0.42) 在 Chrome 110 以下、Firefox 116 以下、Android WebView 或旧版 Safari 中会被完全忽略，变量值变成 unset，元素可能继承父级颜色或变透明——不是“颜色不准”，是压根没生效。
必须用两行声明，让不支持的浏览器跳过第二行：
-
color: #FF6B6B;—— 所有浏览器都认，是保底 sRGB 值 -
color: color(display-p3 1 0.42 0.42);—— 新浏览器优先采用，覆盖前一行
不能反过来写，也不能合并成一行；CSS 层叠规则决定了 fallback 必须在前。
@supports 检测要包裹整条规则，不能只包 color() 值
很多人误以为 @supports (color: color(display-p3 0 0 0)) 可以套在单个声明里，实际它只能作用于整个 CSS 规则块。错写成这样会白费：
button {<br> color: #FF6B6B;<br> @supports (color: color(display-p3 0 0 0)) {<br> color: color(display-p3 1 0.42 0.42);<br> }<br>}
正确写法是把整个规则包进去：
@supports (color: color(display-p3 0 0 0)) {<br> button {<br> color: color(display-p3 1 0.42 0.42);<br> }<br>}
否则旧浏览器解析时会直接报语法错误跳过整段 CSS。
background-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)); - 避免加角度（如
to bottom），防止插值干扰 - 别用
background:简写，它会覆盖掉前面定义的background-image
这个技巧能绕过合成降级，在 Safari 16.4+ 和 Chrome 117+ 中保持 P3 色彩精度。
CSS 变量里不能直接写 color(display-p3)，fallback 必须前置
在 :root 里写 --primary: color(display-p3 1 0.42 0.42); 是危险操作：不支持该函数的浏览器会静默丢弃整条变量声明，后续 var(--primary) 返回空值。
唯一安全写法是 fallback 前置 + 同名变量覆盖：
-
--primary: #FF6B6B;—— 全局保底 -
--primary: color(srgb 1 0.4196 0.4196);—— 新浏览器升级为显式 sRGB（比 hex 更可控） - 真要用 P3，得靠 JS 注入：
document.documentElement.style.setProperty('--primary', window.matchMedia('(color-gamut: p3)').matches ? 'color(display-p3 1 0.42 0.42)' : '#FF6B6B');
媒体查询 @media (color-gamut: p3) 不能替代 @supports，它只反映设备能力，不保证渲染通道开启。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
