box-shadow 的 transition 没反应，主因是过渡属性未写全或值不可动画：颜色、偏移量、模糊/扩散半径可动画，但阴影层数变化、inset 切换、混用颜色格式会导致过渡失效；需统一层数与颜色写法，显式声明 transition: box-shadow，并避免 Safari 下 alpha=0 等兼容问题。
box-shadow 的 transition 为什么没反应？
直接给 box-shadow 加 transition 却看不到变化，大概率是过渡属性没写全或值不可动画。CSS 中只有部分 box-shadow 的组成部分支持平滑过渡——颜色、偏移量、模糊半径、扩散半径可以，但阴影数量（多层阴影）、inset 关键字切换、甚至某些颜色格式（比如带空格的 rgb(255, 0, 0) 和 #ff0000 混用）会导致浏览器放弃过渡。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保起始和结束状态的阴影层数一致，比如都用单层阴影，或都写两层
- 统一颜色写法：全用十六进制，或全用
rgba()（推荐后者，方便控制透明度动画） - 显式声明过渡属性：
transition: box-shadow 0.2s ease;，别只写transition: all - 避免在 hover 状态突然加
inset，它无法与普通阴影过渡；如需内凹效果，改用transform: translateY()配合边框模拟
卡片悬浮时阴影变大但不“浮起”，怎么协调？
纯靠加大 box-shadow 会让卡片看起来“发虚”或“沉在背景里”，缺乏真实物理感。真正有深度的悬浮，需要同步微调位置和阴影——人眼会把“略抬高 + 阴影拉长变淡”理解为离屏面更近。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 搭配
transform: translateY(-2px)，数值别超过 4px，否则失真 - 阴影的
y-offset要减小（比如从4px改成2px），表示光源更“正上方” - 增大
blur-radius（如从8px到16px），同时降低rgba()的 alpha 值（如从rgba(0,0,0,0.15)到rgba(0,0,0,0.1)），模拟远距离柔和投影 - 慎用
spread-radius：正值会让阴影“膨胀”，容易显得廉价；负值收缩又易让边缘生硬
多层 box-shadow 过渡卡顿或闪烁？
写三层以上阴影（比如外扩+内陷+底部强调）时，hover 瞬间可能出现跳变或掉帧，尤其在低端设备或 Safari 上。这不是 bug，而是浏览器对复杂阴影的合成策略导致重绘开销陡增。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用两层阴影达成目标：一层主投影（
0 4px 12px rgba(0,0,0,0.1)），一层底部强化（0 8px 24px rgba(0,0,0,0.08)） - 避免在多层中混用
inset和非inset；如果必须内凹，单独用伪元素::before实现，主元素只管外投影 - 开启硬件加速：给卡片加
transform: translateZ(0)或will-change: box-shadow（仅 hover 前加，hover 后移除，防内存泄漏） - 测试时关掉开发者工具的“Rendering > Paint flashing”，看是否频繁重绘；若闪烁集中在阴影区域，说明层数/模糊值已超临界点
Safari 下阴影过渡不生效或错位？
Safari 对 box-shadow 的过渡支持较保守，尤其在使用 rgba() 颜色且 alpha 值为 0 时（比如 rgba(0,0,0,0)），某些版本会直接跳过过渡，或把 0-alpha 阴影渲染成全黑块。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 起始状态不用完全透明的阴影，改用极低 alpha（如
rgba(0,0,0,0.001)） - 避免在 Safari 中依赖
box-shadow做“显示/隐藏”切换；该场景改用opacity控制伪元素的阴影层 - 检查是否启用了
-webkit-appearance: none或其他重置样式，某些 UI 框架的全局重置会干扰 Safari 的阴影合成 - 真机测试比模拟器可靠；iOS 16+ 和 macOS Ventura 后改善明显，但 iOS 15 及更早仍要保守处理
最常被忽略的是阴影的“语义一致性”：同一套 UI 中，所有卡片的 y-offset 符号（正/负）、模糊与扩散的比例、alpha 衰减节奏，最好保持统一。人眼对不一致的阴影比对颜色更敏感——哪怕只差 1px，也会觉得这个卡片“没对齐”。
