纯 CSS 无法真正追踪鼠标，但可通过 :hover + transform 和动态 box-shadow 偏移模拟光源移动错觉；只过渡 offset-x/y 更高效，动画中需单位一致且结构对齐，drop-shadow() 更适配非矩形元素，阴影颜色忌用纯黑。
用 box-shadow 实现阴影跟随鼠标移动的错觉
纯 CSS 无法真正“追踪”鼠标位置，但可以通过 :hover + transform 配合动态 box-shadow 偏移，模拟光源从上方斜射、阴影随交互偏移的效果。关键不是让阴影动起来，而是让人眼觉得光源在动。
- 真实光源移动 = 阴影长度、方向、模糊度都要变；但 CSS 中只建议调
offset-x和offset-y，其他参数固定，否则性能差且难控制 - 别用
transition直接过渡box-shadow的全部值——浏览器要重绘整个层，卡顿明显；只过渡偏移量（offset-x/offset-y）更轻量 - 示例：给按钮加「上左光源」感，悬停时阴影往右下偏移：
.btn { box-shadow: 0 -2px 8px rgba(0,0,0,0.15); transition: box-shadow 0.2s ease; } .btn:hover { box-shadow: 4px 4px 8px rgba(0,0,0,0.2); }
CSS @keyframes 动画里改 box-shadow 偏移不生效？
常见现象是动画跑起来后阴影没动，或者只动了一帧。根本原因是：CSS 动画中 box-shadow 的偏移值必须用相同单位声明（比如全用 px），且起始/结束值结构必须完全一致——不能一个写 0 0 0 #000，另一个写 10px 10px 10px #000。
- 错误写法：
from { box-shadow: 0 0 0 #000; }→to { box-shadow: 10px 10px 10px #000; }（缺单位） - 正确写法：两端都带单位，且顺序、数量、类型对齐：
@keyframes floatShadow { from { box-shadow: 0px 0px 6px rgba(0,0,0,0.1); } to { box-shadow: 3px 6px 12px rgba(0,0,0,0.2); } } - 注意：动画中不能混用
em、rem和px，也不能一边写颜色一边省略（如0 0 5px默认用当前文字色，但动画中必须显式写全）
用 filter: drop-shadow() 替代 box-shadow 的时机
当元素有圆角、透明背景或非矩形轮廓（比如 clip-path 或 PNG 图像）时，box-shadow 仍按矩形盒子投射，而 filter: drop-shadow() 是按实际像素 Alpha 通道生成阴影，更真实。
- 适用场景：卡片带
border-radius: 12px+overflow: hidden，内部图片溢出；或 SVG 图标需要贴合形状的阴影 - 坑点：
drop-shadow()不支持多层阴影（box-shadow: a b c #000, d e f #333这种写法它不认），也不响应inset - 性能提示：大量使用
filter会触发 GPU 合成层，低端设备可能掉帧；简单交互动效优先用box-shadow+ 偏移
阴影“浮动感”靠的是对比，不是参数堆砌
人眼判断光源位置，主要依据阴影和物体边缘的相对偏移关系，以及阴影边缘的软硬程度。加再大的 blur 或拉再长的 spread，如果偏移方向反直觉（比如光照来自左上，阴影却往左上跑），就会显得假。
立即学习“前端免费学习笔记（深入）”；
- 通用经验：假设光源在屏幕左上方，则正常阴影应向右下方偏移，且越“远”的物体（z-index 越高），偏移量越大、模糊度越高
- 别为了“立体”强行加多层
box-shadow：两层足够（一层主阴影 + 一层极淡的远距离泛光），再多就是视觉噪音 - 最易忽略的一点：阴影颜色别用纯黑。环境光存在，通常用
rgba(0,0,0,0.12)~rgba(0,0,0,0.25)更自然；深色模式下甚至该用浅灰
