在 :root 中定义 --primary 变量必须按降级顺序书写：先写 --primary: #ff6b6b; 作为兜底，再写 --primary: color(srgb 1 0.4196 0.4196); 锁定 srgb，最后写 --primary: color(display-p3 0.98 0.35 0.35); 供支持设备使用；不可用 @supports 包裹变量定义，p3 值须经专业工具导出，不可由十六进制线性换算，且 background-color 使用 display-p3 易失效，推荐改用 background-image 线性渐变实现。
直接在 :root 里写 --primary: color(display-p3 1 0.42 0.42) 是危险操作——旧版 Chrome、Firefox、几乎所有安卓 WebView 会静默丢弃整条声明，后续所有 var(--primary) 都变成透明或继承色，不是“颜色不准”，是压根没定义。
变量定义必须按降级顺序写，不能靠 @supports 包裹
CSS 自定义属性的解析发生在语法层面，不支持运行时降级。浏览器遇到不认识的函数（如 color(display-p3)），就整条跳过，不会 fallback 到下一行。所以：
-
--primary: #FF6B6B;必须放在最前面，作为无条件兜底值 -
--primary: color(srgb 1 0.4196 0.4196);紧跟其后，显式锁定 sRGB 渲染路径，堵住 Safari 把十六进制误判为 P3 的漏洞 -
--primary: color(display-p3 0.98 0.35 0.35);放在最后，仅当浏览器支持且设备启用 P3 时才生效 - 别用
@supports去包裹变量定义——它只能作用于规则块（如选择器内部），不能嵌套进:root声明里
color(display-p3) 的数值不能从 #RRGGBB 直接换算
把设计稿里的 #FF6B6B 拆成 rgb(255, 107, 107) 再除以 255 得到 color(display-p3 1 0.42 0.42)，结果一定偏色。sRGB 和 Display P3 是两个不重叠的色域三角形，不存在线性映射关系。
- 必须用专业工具导出真实 P3 坐标：Photoshop 中启用 “Display P3” Proof Setup 并勾选 “Preserve Color Numbers”，再用吸管取色复制 “Display P3” 值
- Figma 用户需安装插件（如 P3 Color Picker）或导出时明确选择 “Export as Display P3”
- 参数只能是 0.0–1.0 范围内的小数，
color(display-p3 100% 42% 42%)或color(display-p3 255 107 107)全部无效，浏览器静默忽略
background-color 用 display-p3 最容易失效，优先改用 background-image
background-color: color(display-p3 ...) 在 iOS Safari 和多数 Android WebView 中极不稳定：父元素带 transform、opacity 或 filter 时，整层叠上下文常被强制降级为 sRGB 合成，颜色立刻发灰、泛紫。
- 更稳的写法：
background-image: linear-gradient(color(display-p3 0.98 0.35 0.35), color(display-p3 0.98 0.35 0.35)); - 避免简写覆盖：
background:会清掉前面定义的background-image，要分开写或设background-color: transparent叠加 - 别指望
rgba()自动 fallback：它和color(display-p3)不共存，整条声明可能被跳过
@media(color-gamut: p3) 只表示能力，不保证渲染生效
@media (color-gamut: p3) 仅说明设备“能显示 P3”，不代表当前页面正走 P3 渲染管线。很多未校准的 MacBook 返回 true，但实际仍走 sRGB；Chrome 需确认 chrome://flags/#css-color-adjust 已启用，且未被 --force-color-profile=srgb 启动参数覆盖。
- 真正起效需三重满足：设备硬件支持（iPhone 12+、Mac Studio）、系统开启广色域（iOS/macOS 默认开）、页面通过
<meta name="color-scheme" content="light dark">（必须放在最顶部）和@supports双层声明启用色彩管理 - 图像资源也得同步处理：PNG 若不含 sRGB chunk，浏览器可能照单全收 P3 元数据，导致视觉断裂；用
pngcheck -v image.png验证，Figma 导出务必勾选 “Embed color profile”
最易被忽略的是：P3 值本身不携带亮度/对比度信息，暗黑模式下直接复用亮色模式的 P3 坐标，极易过饱和或丢失细节——每个主题色都得单独校准，不能只靠一套变量切换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
