CSS 现代色彩空间：color()、lab、lch 与显示器

概述 CSS Color Level 4 引入 `color()`、`lab()`、`lch()` 等函数，支持广色域（如 Display-P3），在现代设备上呈现更准确的颜色。需关注不同浏览器的支持与回退。 示例 ```css .p3 { color: color(display-p3 1 0.2 0.2) } .lab { color: lab(60% 20 30) } .lch { color: lch(60% 50 30) } /* 背景与渐变 */ .bg { background: linear-gradient(90deg, color(display-p3 0.8 0.2 0.2), color(display-p3 0.2 0.2 0.8)) } ``` 工程建议 - 回退策略：为不支持广色域的浏览器提供 sRGB 近似；使用特性查询与级联层控制。 - 设计流程：在设计到实现保持色彩空间一致；使用正确的图像 ICC/色彩标记。 - 性能与兼容：避免过度复杂的渐变与重绘；验证不同平台的呈现差异。 参考与验证 - MDN CSS Color 文档：https://developer.mozilla.org/docs/Web/CSS/color_value - web.dev 广色域与色彩指南：https://web.dev/articles/css-color-function - CSS Color Module Level 4：https://www.w3.org/TR/css-color-4/