css变量阴影未生效主因是作用域错误或合成层缺失；需检查变量是否传入目标元素、是否被覆盖，ios需加transform: translatez(0)触发渲染。
为什么改了 CSS 变量阴影却没变
大概率是变量没传到目标元素，或者被同名变量覆盖。CSS 变量遵循级联规则，不是全局广播——父元素设的 --shadow-color，子元素能继承；但兄弟元素之间不共享，伪元素（如 ::before）默认也不继承，得显式写 inherit 或重新声明。
- 检查 DevTools 的 Computed 面板里
box-shadow值是否为空或none，再点开它看具体哪段var(--xxx)解析失败 - 确认变量定义位置：写在
:root最稳；若写在.card里，只有它的后代能用，.card__footer可以，但同级的.modal不行 - 拼写必须完全一致：
--shadow-colour和--shadow-color是两个变量，浏览器不会报错，只会静默失效
box-shadow 中用 HEX 颜色导致 Safari 和 Chrome 渲染不一致
Safari（尤其 macOS/iOS 广色域设备）把未声明色彩空间的 HEX 值（比如 #FF6B6B）默认映射到 Display P3，而 Chrome/Firefox 按 sRGB 解析——物理色坐标不同，阴影在 Safari 里就偏亮、发浮。
- 直接改用
rgb(255 107 107)（空格语法），强制走 sRGB 渲染管线，跨浏览器立刻对齐 - 兼容性要求高时可用
rgb(255, 107, 107)，效果相同，但旧版 Safari 对空格语法支持更稳 - 别用
hsl()或rgba()直接写进box-shadow：旧版 Safari 解析不稳定，且不锚定色域 - 真正可控的做法是统一源头：
--shadow-color: rgb(255 107 107);，然后box-shadow: 0 2px 4px var(--shadow-color);
深色模式下阴影糊成一片，只换颜色不管用
直接把浅色模式的 box-shadow: 0 2px 8px rgba(0,0,0,0.15) 拿到黑背景上，对比度太低，人眼根本分不出层次。只重设 --shadow-color 不够，模糊半径和偏移也得调小。
- 深色模式下推荐透明度降到
0.04–0.08，否则容易过曝泛白 - 同步降低
--shadow-blur：浅色用8px，深色建议4px或2px，避免灰雾感 - 必须在
@media (prefers-color-scheme: dark)或[data-theme="dark"]中重定义整组变量，而不是只换颜色 - 别漏写
color-scheme: light dark在:root上，Safari 否则不触发媒体查询
iOS Safari 阴影“消失”或边缘发虚
根本原因是 WebKit 对未触发合成层的元素裁剪或跳过渲染，尤其当父容器有 overflow: hidden、clip-path，或子元素没独立图层时。
- 给带阴影的元素加
transform: translateZ(0)，强制创建合成层 - 绝对避免父级同时设
border-radius和overflow: hidden——这是 iOS 上的“双重封印” - 检查是否被裁剪：临时加
position: relative; z-index: 10，若阴影恢复，说明是层叠上下文缺失 - 慎用
filter: drop-shadow()：它不支持inset，且在 Safari 切主题后可能延迟重绘
最常被忽略的是变量作用域和合成层这两层——前者让修改“看不见”，后者让阴影“画不出”。调试时先看 Computed 值是否解析成功，再看渲染层是否被 Safari 主动跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
