box-shadow 的 transition 默认不生效是因为起始值与结束值结构不匹配，需确保阴影参数数量、单位、颜色格式完全一致才能线性插值；同时移动端需用 touch 事件替代 :active 伪类，并预留溢出空间防裁剪。
box-shadow 的 transition 为什么默认不生效
直接给 box-shadow 加 transition 却没动画？不是写法错，是值类型不匹配。CSS 过渡要求起始值和结束值能线性插值，而 box-shadow 是复合属性（偏移、模糊、扩散、颜色），浏览器只对「同结构、同单位、同颜色格式」的阴影做平滑过渡。比如从 box-shadow: 0 2px 4px rgba(0,0,0,0.1) 到 box-shadow: 0 6px 12px rgba(0,0,0,0.3) 可以动；但若中途加了 inset、换用 hsl() 颜色，或一边带第四项（spread）另一边不带，过渡就直接跳变。
- 确保起始和结束的
box-shadow都有相同数量的长度值（x、y、blur、spread），且单位一致（全用px或全用rem） - 颜色统一用
rgba()或hsla()，避免混用#fff和rgb(255,255,255) - 别漏掉
transition-property—— 写成transition: all .2s看似省事，但会意外触发其他属性动画；明确写transition: box-shadow .2s更稳妥
:hover 和 :active 状态下阴影加深的写法差异
用户点卡片时想要“按下去”的反馈，光靠 :hover 不够——鼠标悬停不等于点击。真交互得靠 :active，但它持续时间极短（毫秒级），直接加深阴影可能来不及感知。更可靠的做法是结合 JavaScript 控制类名，或用伪类组合增强反馈。
-
:hover适合预览态：轻微加深，比如从0 2px 4px rgba(0,0,0,0.1)到0 4px 8px rgba(0,0,0,0.15) -
:active适合点击瞬态：再加一层压感，如0 1px 2px rgba(0,0,0,0.25)，但必须配transition-timing-function: ease-out让它“弹”回来 - 如果要保留“按下后保持高亮”，不能依赖伪类——得用 JS 切换
.is-pressed类，并在该类里定义更深的box-shadow
移动端点击阴影失效的常见原因
iOS Safari 和部分安卓 WebView 默认禁用非 touchstart 触发的 :active，导致卡片点了没反应。这不是 CSS 错，是浏览器策略。
- 给卡片加
cursor: pointer能唤醒部分 iOS 的:active行为（但不保证） - 更稳的方式：监听
touchstart添加临时类，touchend移除，用这个类控制阴影 - 注意
transition在低性能设备上可能卡顿，把时长控制在.2s以内，避免同时过渡多个属性 - 别忘了加
-webkit-tap-highlight-color: transparent去掉 iOS 点击灰斑，否则会干扰阴影视觉
阴影加深时容易忽略的布局抖动问题
box-shadow 本身不占布局空间，但加深后如果模糊半径（blur）或扩散半径（spread）变大，边缘像素可能溢出父容器，触发滚动条或遮挡相邻元素——尤其当卡片用 overflow: hidden 包裹时，阴影会被裁掉。
- 检查父容器是否设置了
overflow: hidden，如有，给卡片加margin预留阴影空间（比如加深后 blur + spread 总和是 12px，就加margin: 6px） - 避免用
inset阴影模拟加深效果——它会向内收缩，视觉上反而像“陷进去”，和预期相反 - 深色背景上加深阴影不明显？改用对比更强的
rgba(0,0,0,0.4)而非单纯加大 blur 值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
