color(display-p3) 必须使用经专业工具转换的真实p3坐标值，不可直接换算srgb；需配合@supports和@media(color-gamut:p3)启用，且必须前置srgb回退声明。
color(display-p3) 的参数必须是 P3 原生坐标，不是 sRGB 换算值
直接把设计稿里的 #FF6B6B 拆成 rgb(255, 107, 107) 再除以 255 得到 color(display-p3 1 0.42 0.42)，结果一定偏色——这不是浏览器 bug，是坐标系错位。sRGB 和 display-p3 是两个不重叠的三角形色域，[0.64, 0.33] 和 [0.792, 0.299] 根本不能线性映射。
必须用专业工具导出真实 P3 值：
- Photoshop：View > Proof Setup > Custom… → Device to simulate 选 Display P3 → 勾选 Preserve Color Numbers → 吸管取色后右键复制 “Display P3” 值（小数三元组）
- Figma：启用插件
P3 Color Picker，或导出时勾选Export as Display P3（需 macOS 系统级支持） - 命令行验证：
colorsync -i input.png -o output.p3.png -p "Display P3"批量转换后取值
color(display-p3) 只接受 0.0–1.0 线性浮点值，三位小数足够（如 0.98 0.35 0.35），超出会被截断；100%、#FF6B6B、255 107 107 全部无效，浏览器静默忽略。
只写 color(display-p3) 不生效，必须配 @supports + color-gamut
color(display-p3 1 0 0) 单独写在 CSS 里，旧版 Chrome、Firefox、所有安卓 WebView 都当它不存在，元素可能变透明或继承默认色。这不是语法错误，是渲染上下文未激活。
必须组合使用：
- 用
@supports (color: color(display-p3 0 0 0))包裹声明，过滤不支持的浏览器 - 加
@media (color-gamut: p3)进一步限定设备能力，避免在 sRGB 屏上强行渲染 - HTML 中声明
<meta name="color-scheme" content="light dark">，部分 iOS Safari 版本依赖这个触发 P3 渲染
注意：@media (color-gamut: p3) 在 Windows 或旧 Mac 上永远不匹配，别在这类环境测效果。
background-color 用 display-p3 容易“变灰”，换 background-image 更稳
在带 opacity、filter 或 transform 的元素上设 background-color: color(display-p3 ...)，整个层叠上下文常被强制降级为 sRGB 合成，颜色立刻发灰、偏橙或泛紫。
绕过这个限制的方法：
- 改用
background-image: linear-gradient(color(display-p3 0.98 0.35 0.35), color(display-p3 0.98 0.35 0.35))—— 渐变层更大概率保留原色域 - 避免在父容器上设
will-change: transform或transform: translateZ(0)，这些会触发旧合成器管线 - Chrome 开发者工具中开启
Render with color management（Canary），Safari 开启Show color gamut warnings，能直观看到哪些声明被降级
fallback 不是可选项，是必填项且顺序决定是否生效
浏览器不会自动 fallback。如果你只写：
background-color: color(display-p3 0.98 0.35 0.35);
那所有不支持的环境都得不到颜色。必须显式提供 sRGB 回退，且 回退声明必须写在前面：
background-color: #FF6B6B;<br>background-color: color(display-p3 0.98 0.35 0.35);
原因：CSS 是从上到下解析，遇到不识别的函数就跳过整条声明；color(display-p3) 在不支持的浏览器里是无效值，整行被丢弃，所以上面那行 #FF6B6B 就成了最终生效值。
容易被忽略的一点：CSS 自定义属性（--p3-red: color(display-p3 1 0 0)）在 Safari 16.4+ 之前完全不支持存 color() 值，变量里塞进去等于白写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
