真实深度感需用--shadow-x/--shadow-y控制偏移量，配合box-shadow和transition: box-shadow实现；仅调blur-radius无效，人眼依赖y向位移判断高度；变量须带单位，多层阴影需逗号分隔，深色模式需整组重定义变量。
直接用 --shadow-x 和 --shadow-y 控制偏移量，配合 box-shadow 声明和 transition: box-shadow，就能做出真实、可维护的深度感。其他方案（比如只改颜色、堆层数、用 filter: drop-shadow()）要么无效，要么掉帧或不兼容。
为什么不能只靠 box-shadow 的模糊值来模拟深度
模糊半径（blur-radius）变大只会让阴影更“糊”，不是“抬高”。人眼判断高度主要靠阴影在 Y 方向的位移——也就是垂直偏移量。如果 box-shadow: 0 2px 20px rgba(0,0,0,0.1)，2px 偏移太小，20px 模糊又太大，结果是灰蒙蒙一团，看不出卡片浮起来了没。
- 真实景深 =
--shadow-y（如4px） + 合理blur-radius（如12px，≈ 3× 偏移） - 偏移量必须带单位：
--shadow-y: 4px有效，--shadow-y: 4无效（CSS 不认无单位数值） - 别用
calc()动态算偏移，除非所有参与运算的值都带单位且合法（例如calc(var(--base) * 2)要求--base是2px，不是2）
如何用变量安全地管理多层阴影
多层阴影必须写在同一行、逗号分隔，浏览器不会合并多条 box-shadow 声明。变量可以存整段字符串，也可以分层定义再拼接，但必须确保最终输出语法合法。
- 推荐分层语义化定义：
--shadow-near: 0 2px 4px rgba(0,0,0,0.1)、--shadow-far: 0 8px 16px rgba(0,0,0,0.04) - 调用时写成：
box-shadow: var(--shadow-near), var(--shadow-far) - 避免把偏移+模糊塞进一个变量再拼色值，例如
--shadow-base: 0 4px 8px+--shadow-color: rgba(0,0,0,0.12)→box-shadow: var(--shadow-base) var(--shadow-color)可行，但前提是--shadow-base的值本身是合法阴影片段（含空格、单位） - 真机上慎用 >3 层或
blur > 10px，iOS Safari 低电量模式下会降级渲染甚至丢弃
hover 深度变化时最容易失效的三个点
很多人写了变量、也写了 hover，但阴影不动——问题不在变量，而在过渡绑定错位置或基础状态缺失声明。
-
transition必须写在使用变量的属性上，即transition: box-shadow 0.25s ease，不是transition: --shadow-y 0.25s（变量本身不可动画） -
--shadow-x和--shadow-y必须在默认状态（非 hover）里显式声明，例如--shadow-x: 0px; --shadow-y: 0px;，否则 hover 时变量未定义，计算失败 - hover 里只更新变量，不要重写整个
box-shadow值，否则 transition 失效（浏览器无法插值两个完全不同的字符串）
深色模式下阴影发灰，光改颜色不够
在深色背景上继续用 rgba(0,0,0,0.15)，阴影对比度太低，看起来像脏污，不是深度。这不是 bug，是光路逻辑变了。
- 不能只换 color：把
--shadow-color改成rgba(255,255,255,0.08)还得同步调小--shadow-blur，否则白影糊成一片 - 更稳妥的做法是整组重定义：
[data-theme="dark"] { --shadow-y: 3px; --shadow-blur: 8px; --shadow-color: rgba(255,255,255,0.06); } - 测试必须关掉 DevTools 的“模拟深色模式”，改用系统级设置，否则
@media (prefers-color-scheme: dark)不触发
真正难的不是写对第一层 hover 效果，而是让所有卡片在 light/dark、PC/移动端、低电量/高性能模式下都保持一致的视觉重量——这要求每个变量都有明确语义、每层阴影有物理依据、每次过渡都只动该动的属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
