如何在CSS中为不支持P3色域的屏幕设置降级颜色？-css教程-PHP中文网

fallback必须写在color(display-p3)前且同选择器内，否则旧浏览器会丢弃整条声明；@supports不能包裹变量定义，background-color最不稳定，P3值须专业工具导出，不可手算。

如何在css中为不支持p3色域的屏幕设置降级颜色？

直接写 fallback 颜色在 color(display-p3) 前面，且不能用 @supports 包裹变量定义——否则旧浏览器会丢掉整条声明。

浏览器解析 CSS 是从上到下逐行进行的。遇到不认识的 color(display-p3)，整条声明会被跳过，但不会影响前面已声明的值。所以顺序不能反：

如果反过来，旧版 Chrome 或 Android WebView 会忽略第二行，但第一行仍有效；反过来写就全丢了。

很多人想这么写：

@media (color-gamut: p3) {
  :root { --primary: color(display-p3 1 0.42 0.42); }
}

这会导致 sRGB 屏幕上也继承这个值，而它在非 Safari 中根本无效，最终可能渲染为黑色或透明。正确做法是：

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

先在 :root 里定义保底：--primary: #FF6B6B;
再用 @media (color-gamut: p3) 覆盖，但只覆盖给支持它的环境
更稳妥的写法是叠加 @supports：@supports (color: color(display-p3 0 0 0)) and (color-gamut: p3)

即使 color(display-p3) 在 color 或 border-color 中勉强可用，background-color 在 iOS Safari 和多数 WebView 中仍大概率被强制映射回 sRGB，结果发灰、偏棕。

改用单色无角度渐变：background-image: linear-gradient(color(display-p3 0.98 0.35 0.35), color(display-p3 0.98 0.35 0.35));
显式设 background-color: transparent; 避免简写覆盖
别混用 background 简写和 background-image，否则会清掉渐变

把 #FF6B6B 拆成 rgb(255, 107, 107) 再除以 255 得到 color(display-p3 1 0.42 0.42) 是典型错误——sRGB 和 Display P3 是两个不重叠的三角形，线性换算必然严重偏色。

Photoshop：View → Proof Setup → Custom → Device to simulate “Display P3” → 勾选 “Preserve Color Numbers” → 吸管取色后右键复制 “Display P3” 值
Figma：必须用插件（如 P3 Color Picker）或导出时明确选 “Export as Display P3”
参数只能是 0.0–1.0 范围内的小数，color(display-p3 100% 0% 0%) 或 color(display-p3 255 0 0) 全部非法

真正卡住效果的往往不是代码写错，而是没放在最顶部，或者用户系统禁用了广色域显示。