直接改--shadow-x/--shadow-y没反应，是因为变量本身不可动画，必须在元素上显式声明box-shadow: var(--shadow-x) var(--shadow-y)...并设置transition: box-shadow，且所有值需带单位（如2px而非2）。
为什么直接改 --shadow-x 和 --shadow-y 没反应
变量本身不能动画，浏览器只对实际 CSS 属性做插值。你改了 --shadow-x，但若 box-shadow 声明里没用 var(--shadow-x)，或者没在基础状态加 transition: box-shadow，阴影就完全不会动。
- 必须在元素上显式写
box-shadow: var(--shadow-x) var(--shadow-y) ...，不能只声明变量 -
transition必须写在使用变量的元素上，且目标属性是box-shadow，不是--shadow-x - 变量值必须带单位（如
0px），2和2px在计算中行为完全不同，后者才被识别为长度 - 伪元素（如
::before）默认不继承自定义属性，需手动加inherit或重新声明
多层阴影怎么用变量存又不翻车
别拆成 --shadow-x1、--shadow-blur2 再拼字符串——CSS 不支持运行时字符串拼接。正确做法是把整条多层阴影当做一个完整值存进变量：
- 在
:root里定义：--shadow-card: 0 2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06); - 调用时直接：
box-shadow: var(--shadow-card); - 要 fallback 就写：
box-shadow: var(--shadow-card, 0 2px 4px rgba(0,0,0,0.1)); - 深色模式下只需重定义
--shadow-card，颜色用var(--shadow-color)而非硬编码
如何让 box-shadow 的多层顺序不乱套
多层阴影按逗号分隔的顺序从左到右绘制，**第一个在最底层，最后一个在最顶层**。顺序错了，立体感就塌了：
- 模拟光源在左上方？先写浅色高光：
2px -2px 4px rgba(255,255,255,0.3)，再写主投影：4px 4px 12px rgba(0,0,0,0.12) - 外阴影 + 内高光组合中，
inset那层偏移方向要反向：外阴影是0 2px，内阴影就该是inset 0 -2px - 避免超过 4 层——真机 Safari 在低电量模式下会悄悄降级模糊值，甚至丢弃后几层
- 所有参数单位必须一致，比如
0 2px 4px 0 rgba(...)里不能混入无单位数字
移动端阴影突然变淡或消失，是不是变量写错了
大概率不是变量问题，而是浏览器主动降级。iOS Safari 和部分安卓 WebView 在检测到模糊值 > 10px 或层数 > 3 时，会压缩 alpha 值或跳过渲染：
- 上线前务必在真机测试常用值，例如
box-shadow: 0 4px 8px rgba(0,0,0,0.12) - 避免用
rgba(0,0,0,0.05)这类极低透明度——旧 Android WebView 会四舍五入成 0 - 需要强一致性可换
filter: drop-shadow()，但它不支持inset，也不响应 CSS 变量（得靠 JS 动态 setAttribute） - 如果用了
transform或will-change触发新 stacking context，记得检查父容器是否意外截断了阴影绘制区域
box-shadow 上，以及多层阴影顺序和单位混用导致的视觉断裂。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
