直接修改--shadow变量可实时重绘阴影，但值必须为合法box-shadow字符串；需在:root定义默认值，js用setproperty动态修改，禁止引号或漏单位，多层阴影须整串存储，safari需translatez(0)加速，深色模式应重定义整组变量。
直接改 --shadow 就能实时更新，但值必须合法
浏览器会自动重绘，不需要 JS 主动触发样式刷新——前提是 box-shadow 声明里用了 var(--shadow)，且你设的变量值是符合语法的完整阴影字符串。比如：--shadow: 0 4px 12px rgba(0,0,0,0.15) 是合法的；--shadow: "0 4px 12px rgba(0,0,0,0.15)"（加了引号）或 --shadow: 0 4 12px rgba(0,0,0,0.15)（漏单位）都会让整条 box-shadow 失效，退成无阴影。
- 推荐在
:root里定义默认值：:root { --shadow: 0 4px 12px rgba(0,0,0,0.15); } - JS 动态修改用：
element.style.setProperty('--shadow', '0 8px 24px rgba(0,0,0,0.2)') - 别在 CSS 里写
box-shadow: var(--shadow) !important——!important不影响自定义属性解析，反而可能掩盖真实问题
box-shadow 不能只拆一个参数设变量
你不能只给模糊半径（blur radius）单独设一个 --blur 变量，然后写 box-shadow: 0 0 var(--blur) #000——CSS 不支持运行时参数拼接，var(--blur) 展开后只是个字符串，不会自动补上单位或空格，结果可能是 0 0 12 #000，非法。
- 可行方案是把偏移+模糊打包成语义变量，例如：
--shadow-base: 0 4px 12px，再配--shadow-color: rgba(0,0,0,0.15)，组合使用：box-shadow: var(--shadow-base) var(--shadow-color) - 更稳妥的是拆成四个独立变量：
--shadow-x、--shadow-y、--shadow-blur、--shadow-color，每个只管一个值 - 多层阴影要整个字符串存变量，比如：
--shadow-stack: 0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.08)
鼠标跟随阴影必须用 mousemove + calc() 算偏移
仅靠 :hover 无法读取坐标，必须用 JS 把 e.clientX 和 e.clientY 写进 --mouse-x / --mouse-y，再在 CSS 里用 calc() 拉回元素中心。
- 监听时别忘了移动端：
touchmove要取e.touches[0].clientX，且需{ passive: false }+e.preventDefault() - CSS 中减去元素宽高一半要用单位乘法绕过限制：
calc(var(--mouse-x) - 50% * 1px)，不是calc(var(--mouse-x) - 50%) - 别用
requestAnimationFrame节流mousemove——现代浏览器对setProperty更新做了优化，加 raf 反而引入一帧延迟，导致拖尾
Safari 和深色模式下阴影容易翻车
模糊值超过 40px 在 Safari 上可能不渲染或掉帧；深色背景下沿用浅色模式的 rgba(0,0,0,.15) 会让阴影发灰、没层次。
- Safari 建议加
transform: translateZ(0)强制 GPU 加速，尤其当blur-radius > 20px - 深色模式别只换颜色，要重定义整组变量：
[data-theme="dark"] { --shadow: 0 4px 8px rgba(255,255,255,0.08); } - 测试深色模式务必关掉开发者工具的“模拟”，改用系统级设置，否则
@media (prefers-color-scheme: dark)可能不生效
真正卡住人的从来不是怎么写，而是变量值拼出来是不是合法字符串、坐标映射时差没差一个负号、Safari 里少没少 translateZ(0)——这些细节错一个，阴影就彻底消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
