box-shadow过渡失效需检查参数结构对齐、单位统一、层数一致；正确做法是显式补全所有参数并匹配过渡时间与缓动函数；移动端需用媒体查询或JS触控态替代:hover。
box-shadow过渡失效时先检查参数结构是否对齐
浏览器对box-shadow做插值动画，不是“整体变大”，而是逐项计算每个长度值和颜色通道。只要起始和结束状态中任意一项缺失、单位不统一、或层数不一致，就会直接跳变。
常见错误包括：
- 默认写
box-shadow: 0 2px 4px rgba(0,0,0,0.1)（3个长度值），hover却写成box-shadow: 0 8px 16px 2px rgba(0,0,0,0.2)（4个长度值） - 一边用
rgba(0,0,0,0.1)，另一边用#000，透明度无法插值 - 默认无
inset，hover突然加inset，结构彻底不匹配
正确做法是显式补全所有参数：哪怕扩散半径为0，也要写0；颜色统一用rgba()；多层阴影必须严格一一对应。
过渡时间与缓动函数要匹配阴影变化幅度
0.1s太短像闪烁，2s又拖沓——但更关键的是：变化幅度大时，不能还用默认ease。比如从0 2px 4px跳到0 12px 36px，中间加速过猛会显得“冲”。
立即学习“前端免费学习笔记（深入）”；
推荐组合：
- 小幅度调整（如卡片微浮起）：
transition: box-shadow 0.3s ease - 明显加深+扩大（如按钮悬停）：
transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) - 避免
transition: all——它会让其他属性（如color）也参与过渡，干扰阴影节奏
移动端没有:hover，得用触控态替代
在手机上，:hover基本不触发，用户点下去就松手，阴影加深几乎不可见。这不是你代码写错了，是规范如此。
可行方案只有两个：
- 用媒体查询隔离：
@media (hover: hover) and (pointer: fine) { .card:hover { ... } }，只让桌面生效 - JS监听
touchstart加临时类（如.card.is-pressed），touchend立刻移除；别用:active，它只维持几毫秒
注意：Safari 对模糊半径 >40px 的box-shadow支持不稳定，真机测试比 DevTools 更可靠。
性能敏感场景要控制阴影层数与模糊值
叠加3层阴影 + 每层blur: 30px，低端安卓机可能掉帧。不是不能用，而是得权衡。
优化建议：
- 单层阴影够用就别堆叠；必须多层时，把最外层模糊值控制在
24px以内 - 加
will-change: box-shadow可提示浏览器提前准备，但只加在真正频繁交互的元素上 - 慎用
filter: drop-shadow()替代——它不支持多层，且某些安卓 WebView 渲染异常
真正难的不是写出动画，而是让 iOS、Android、桌面 Chrome 在不同负载下都保持节奏一致。调试时，优先关掉其他动画，单独压测阴影路径。
