linear-gradient()中禁止混用srgb与display-p3颜色，否则整条声明被静默丢弃；必须统一色彩空间，用color-mix()预生成中间色并配@supports+@media双层检测及srgb fallback。
linear-gradient() 里不能混用 sRGB 和 display-p3 颜色
浏览器根本不允许在单个 linear-gradient() 中混合不同色彩空间的颜色值。写成 linear-gradient(to right, #FF6B6B, color(display-p3 0.98 0.42 0.42)) 会导致整条渐变声明被静默丢弃——不是降级，是直接跳过，元素可能显示为透明或继承上层背景色。
原因很直接：CSS 渐变规范强制所有插值必须在同一色彩空间内进行，而 linear-gradient() 不支持跨空间插值，也不识别 in display-p3 这类指令（它只认 in srgb，且仅限于 color-mix()）。
- Chrome、Safari、Firefox 均不解析含混合空间的渐变语法，DevTools 里也看不到报错
-
color(display-p3)在渐变中单独出现（如全用 P3）仍需@supports+@media (color-gamut: p3)双重包裹，否则无效 - 即使设备支持 P3，
background-color上的 P3 值也比background-image更容易被强制降级为 sRGB，发灰风险更高
正确做法：用 color-mix() 预生成中间色，再拼进渐变
想让渐变在 P3 设备上更饱满、sRGB 设备上不偏色，得放弃“动态混合”，改用 color-mix() 提前算出关键停靠点颜色，再喂给 linear-gradient()。
例如从 P3 红过渡到 P3 蓝，不能直接写 linear-gradient(..., color(display-p3 0.98 0.42 0.42), color(display-p3 0.1 0.5 0.9))，而应：
- 先用
color-mix(in display-p3, color(display-p3 0.98 0.42 0.42) 70%, color(display-p3 0.1 0.5 0.9) 30%)算出中间色（注意：必须两端同为空间，且显式写in display-p3） - 把结果值（如
#8a3e6c）手动写入渐变停靠点：linear-gradient(to right, #FF6B6B, #8a3e6c, #2a5ac4) - 整个方案必须套
@supports (color: color-mix(in srgb, red, blue))，否则旧版 Safari 或 Firefox 会忽略全部
sRGB fallback 必须独立声明，且顺序不能错
你无法靠浏览器自动把 P3 值转成 sRGB，所以渐变里的每个 P3 颜色都得配对应 sRGB 版本，并确保 sRGB 写在前面。
错误写法：background-image: linear-gradient(to right, color(display-p3 0.98 0.42 0.42), #2a5ac4); —— 后者不会成为 fallback，整条规则失效。
正确结构是：
/* 先给纯 sRGB 渐变兜底 */<br>background-image: linear-gradient(to right, #FF6B6B, #2a5ac4);<br>@supports (color: color(display-p3 0 0 0)) and (color: color-mix(in srgb, red, blue)) {<br> @media (color-gamut: p3) {<br> background-image: linear-gradient(to right,<br> color(display-p3 0.98 0.42 0.42),<br> color(display-p3 0.1 0.5 0.9)<br> );<br> }<br>}
-
@media (color-gamut: p3)必须嵌套在@supports内，避免不支持 P3 的设备误触发 - 十六进制或
rgb()值必须归一化为 sRGB，不能依赖设计稿导出时的“P3 RGB 数值”——那是错的坐标系 - 别用
hsl()或oklch()混入同一渐变，它们和 P3/sRGB 之间没有隐式转换
图像资源必须同步走 P3 色彩链路
就算 CSS 渐变全写对了，如果页面里插入的 PNG 或 SVG 自带 sRGB 元数据（比如 Figma 导出没勾选 “Embed color profile”），整体视觉依然断裂——P3 文字 + sRGB 图片 = 色彩断层。
验证方式：pngcheck -v image.png 查看是否含 sRGB chunk；不含说明导出时漏了色彩配置。
- Figma 导出前务必设色彩空间为
sRGB（非“Display P3”），并勾选Embed color profile - Photoshop 中用
File > Export > Export As，勾选Convert to sRGB和Embed Color Profile - 不要截图传图——系统截图默认走屏幕当前色域，iPhone 截图可能是 P3，Windows 截图必是 sRGB，不可控
实际生效的关键点很朴素：P3 不是“加个函数就能亮”，它是设备、系统、meta、CSS、图像五层链条，断一不可。最容易被忽略的是 meta 标签位置和图像元数据——这两项错了，哪怕 CSS 写得再精准，DevTools 里看到的 gamut 也永远是 sRGB。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
