color(display-p3)需用@supports (color: color(display-p3 0 0 0))包裹，仅声明坐标不保证高饱和；background-color最易失效，推荐用单色渐变替代；p3值须专业工具导出，不可手算转换。
不能直接用 color(display-p3) 表示“高饱和色彩”——它只是声明一个坐标，是否饱和取决于设备是否真能渲染它；不满足条件时，它会被整条忽略，元素可能变黑或继承默认色。
@supports (color: color(display-p3 0 0 0)) 是必须的包裹层
浏览器识别 color(display-p3) 不是靠设备有没有 P3 屏，而是看 CSS 引擎是否支持该语法。Safari 16.3 及更早、Chrome ≤116、Firefox 全版本根本不解析这个函数，写了等于删掉整行。
-
@supports必须写全：开头是color:，括号内是完整函数调用，如@supports (color: color(display-p3 0 0 0))；漏掉color:前缀（比如写成@supports (color(display-p3 0 0 0))）会导致整个块被跳过 - 不能嵌套在
@media (color-gamut: p3)里——叠加反而增加失效概率，@supports本身已足够 - 参数只能是三位小数的 0.0–1.0 范围三元组，
color(display-p3 #FF0000)、color(display-p3 255 0 0)、color(display-p3 100% 0% 0%)全部非法
background-color: color(display-p3 ...) 最容易失效
这是当前最不可靠的使用方式。iOS Safari 和多数 Android WebView 在绘制 background-color 时会绕过色彩管理，把 P3 坐标强行映射到 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 -
border-color、box-shadow、text-shadow中使用color(display-p3)支持度更低，优先用渐变模拟
P3 数值不能手算，必须从专业工具导出
sRGB 和 Display P3 是两个不重叠的色域三角形，数值不能线性换算。把设计稿里的 #FF6B6B 拆成 rgb(255, 107, 107) 再除以 255 得到 color(display-p3 1 0.42 0.42)，结果一定严重偏色。
- Photoshop：View > Proof Setup > Custom → Device to simulate 选 “Display P3” → 勾选 “Preserve Color Numbers” → 吸管取色后右键复制 “Display P3” 值（小数三元组）
- Figma：必须用插件（如 P3 Color Picker）或导出时明确选择 “Export as Display P3”，否则给的十六进制值根本不是 P3 坐标
- 命令行验证可用：
colorsync -i input.png -o output.p3.png -p "Display P3"
真正卡住效果的往往不是代码写错，而是没放
最顶部、系统广色域被禁用、页面跑在 file:// 协议下，或者父容器用了transform / opacity 触发了 sRGB 强制合成——这些点比函数怎么写更难排查。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
