最稳妥做法是用--elevation-n变量直接存储完整box-shadow字符串，如--elevation-2: "0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.04)"，深色模式通过[data-theme="dark"]重写，调用时需加fallback，且多层阴影须按“小偏移+低模糊→大偏移+高模糊”从左到右排列以保证立体感。
直接用--elevation-N变量存完整box-shadow字符串最稳妥
别试图在 CSS 里拼接字符串或做 calc 运算，浏览器不支持运行时组合。把每层阴影（包括多层逗号分隔的整条值）当一个原子单位存进变量，是最小心智负担、最高兼容性的做法。
-
--elevation-1到--elevation-4全部定义在:root下，值为带引号的完整字符串，例如：--elevation-2: "0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.04)" - 深色模式下用
[data-theme="dark"]重写同一组变量，颜色和透明度可同步更新，无需改 HTML 或 JS - 调用时必须加 fallback：
box-shadow: var(--elevation-2, 0 2px 4px rgba(0,0,0,0.1))，否则变量未生效时阴影会彻底消失
多层阴影顺序写反了，立体感就塌了
CSS 渲染多层 box-shadow 是从左到右绘制，**最右边那层在最上层（视觉最近）**。所以模拟纸张叠放，得按“小偏移+低模糊 → 大偏移+高模糊”从左往右排。
- 错误写法：
box-shadow: 0 16px 32px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.1)—— 近层被远层盖住 - 正确顺序：
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 16px 32px rgba(0,0,0,0.04) - inset 阴影要反向 offset：外层是
0 2px，内高光就得是inset 0 -2px，不然光路逻辑冲突，边缘发虚
真机上阴影变淡或消失？大概率不是变量问题，是浏览器降级
iOS Safari 和部分安卓 WebView 在低电量或旧版本下，会对模糊值 >10px、层数 >3、或透明度
- 安全值推荐：
0 4px 8px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.06)—— 模糊 ≤8px，透明度 ≥0.06，层数 ≤2 - 避免
rgba(0,0,0,0.05)这类值，旧 Android WebView 会四舍五入成 0，阴影直接不画 - 上线前必须在 iOS Safari 和主流安卓机型实测，不能只信模拟器
想用 JS 动态改阴影？别碰单个参数变量
有人想拆成 --shadow-x、--shadow-blur 再组合，结果发现改了变量阴影不动——因为 CSS 不支持运行时拼接字符串，var(--x) var(--y) 中间少空格、单位没写全、或者没在元素上声明 transition: box-shadow，都会失败。
- JS 动态控制推荐只改整条值：
document.documentElement.style.setProperty('--elevation-2', '0 4px 8px rgba(0,0,0,0.15)') - 如果真要逐参数控制（比如拖拽调节模糊值），用
filter: drop-shadow()更可靠，它支持单参数动画，且对低性能设备更友好 - 所有变量值必须带单位（
2px不是2），否则计算中断，fallback 也不会触发
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
