hex颜色在safari中偏亮是因为其将未声明色彩空间的hex值默认解析为display p3色域，而chrome/firefox按srgb解析；改用rgb(255 107 107)可强制srgb渲染，实现跨浏览器一致。
box-shadow 颜色在不同浏览器中不一致，根本不是写法错误，而是同一段 HEX 颜色值（比如 #FF6B6B）被 Safari 当作 Display P3 解析，Chrome 和 Firefox 默认按 sRGB 解析——物理色坐标不同，阴影自然“变暖”或“发灰”。直接改用 rgb(255 107 107) 就能锚定 sRGB，立刻对齐。
为什么 HEX 颜色在 Safari 里会偏亮
Safari（尤其 macOS/iOS 广色域设备）默认把未声明色彩空间的 HEX 值映射到 Display P3 色域；而 Chrome 和 Firefox 把 #FF6B6B 当作 sRGB 处理。P3 下的红色更饱和、更亮，导致阴影在 Safari 中视觉上“浮起来”，和深色背景或渐变搭配时尤其明显。
- 临时验证：把
box-shadow: 0 2px 4px #FF6B6B;改成box-shadow: 0 2px 4px rgb(255 107 107);，Safari 颜色立刻“沉下来”，和 Chrome 一致 -
rgb(255 107 107)是现代空格语法，强制走 sRGB 渲染管线；rgb(255, 107, 107)兼容性更好，但效果相同 - 别用
hsl()或hsla()直接写进box-shadow—— 旧版 Safari 对其解析不稳定，且不保证色域锚定
rgba() 的 alpha 不跨浏览器变色，但视觉明暗会漂移
rgba(0,0,0,0.1) 本身不会变成不同颜色，但最终边缘过渡的软硬程度受浏览器抗锯齿策略影响：Firefox 默认 subpixel AA，Chrome 用 LCD 模式，Safari 在 Retina 屏上做 gamma 校正。这会让相同 alpha 值在不同浏览器里显得略“硬”或略“融”。
- 别靠调 alpha “修颜色”——先统一基础色空间（用
rgb()），再微调 alpha - 深色背景下慎用
rgba(255,255,255,0.1)：Safari 可能因 gamma 补偿显得过亮，改用hsla(0,0%,100%,0.08)更稳 - 多层阴影叠加时，alpha 不是线性累加：
box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.05);在 Safari 里视觉浓度 ≈ 0.09，在 Chrome ≈ 0.095
currentColor 和 transparent 都不可靠
currentColor 在 box-shadow 中根本不读取 background-color —— 它只继承元素自身的 color 值。很多人写 box-shadow: 0 2px 4px currentColor;，结果阴影是黑的，误以为是兼容问题，其实是逻辑误解。
- 即使你给元素设了
color: transparent;，阴影也不会“透明”，而是回退为黑色（Safari 旧版本尤其明显） -
transparent等价于rgba(0,0,0,0)，不是占位符，它让阴影彻底不可见，调试时难发现 - 真正可控的做法：用 CSS 变量统一源头，比如
--shadow-color: rgb(255 107 107);，然后box-shadow: 0 2px 4px var(--shadow-color);
最易被忽略的是：色差从来不是孤立问题。当你在 linear-gradient 里也用了 #FF6B6B，那渐变插值路径和阴影色基根本不在同一色域，整套 UI 的色彩一致性就崩了。统一用 rgb() 锚定 sRGB，不是“修一个属性”，而是守住整个设计系统的色彩底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
