box-shadow transition没动画是因为起始值与结束值结构不匹配，需确保阴影层数、参数数量、单位、颜色格式完全一致才能线性插值；:hover用于预览态轻微加深，:active用于瞬态压感反馈，移动端须用touchstart/touchend替代:active，并预留溢出空间防裁剪。
box-shadow transition 为什么没动画？
不是写法错，是起始值和结束值结构不匹配，浏览器无法线性插值。比如 box-shadow: 0 2px 4px rgba(0,0,0,0.1) 到 box-shadow: inset 0 2px 4px rgba(0,0,0,0.1) 就会跳变——inset 的有无直接破坏插值条件。
必须保证：
- 阴影层数一致（都单层，或都双层）
- 每层参数数量相同（5个：h-offset、v-offset、blur、spread、color）
- 单位统一（全用 px，别混用 rem 或无单位值）
- 颜色格式一致（全用 rgba()，别一边 #000 一边 rgb(0,0,0)）
transition 写 all 还是只写 box-shadow？
写 transition: all 0.3s 是常见错误。它会让 background-color、border、甚至 font-size 都参与过渡，造成视觉抖动或卡顿。
扁平化交互强调精准反馈，应该：
- 明确限定属性：transition: box-shadow 0.25s ease-out
- 如果同时用 transform（如 translateY），需单独声明：transition: box-shadow 0.25s ease-out, transform 0.25s ease-out
- 避免在移动端同时过渡多个属性，时长建议 ≤ 0.2s
:hover 和 :active 的阴影变化逻辑不同
:hover 是预览态，适合轻微加深；:active 是瞬态点击反馈，需要更短、更有“压感”的变化。
典型组合：
- 默认态：box-shadow: 0 1px 3px rgba(0,0,0,0.08)
- :hover：box-shadow: 0 2px 6px rgba(0,0,0,0.12)
- :active：box-shadow: 0 1px 2px rgba(0,0,0,0.25) + transition-timing-function: ease-out（让它“弹”回来）
注意：iOS Safari 默认禁用非 touchstart 触发的 :active，稳妥做法是监听 touchstart 添加临时类，再用该类控制阴影。
阴影加深时布局溢出怎么防？
box-shadow 不占布局空间，但模糊半径（blur）或扩散半径（spread）变大后，像素可能超出容器边界，被父元素裁剪。
解决办法：
- 给父容器加 overflow: visible（默认是 visible，但某些框架或重置样式会设成 hidden）
- 卡片自身留白：用 padding 预留阴影空间，或用 margin 避免紧贴边缘
- 移动端尤其要注意，高模糊值（如 24px）在低端设备上易卡顿，建议悬停态最大用到 12px
实际中最容易被忽略的，是阴影参数结构一致性——哪怕只差一个 inset 或一个单位，动画就彻底失效，且控制台不报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
