box-shadow过渡失效的根本原因是起始与结束值结构不匹配导致插值失败，需确保参数数量、单位、颜色格式及多层阴影顺序完全一致，并显式声明transition: box-shadow。
box-shadow过渡失效的典型表现
鼠标悬停时阴影“啪”一下跳变，没有渐变过程——这不是浏览器bug，而是box-shadow值结构不匹配导致插值失败。常见错误包括：
起始值写box-shadow: 0 2px 4px rgba(0,0,0,0.1)，结束值却漏掉扩散半径，变成box-shadow: 0 8px 16px #000；或混用颜色格式，比如一边用rgba()，另一边用#000；又或者在hover里加了inset而默认状态没写，结构直接不一致。
transition必须明确作用于box-shadow
Bootstrap 5+ 的.card默认只过渡background-color和border-color，box-shadow被排除在外。即使你写了transition: all .3s，也容易因浏览器解析顺序或权重问题失效。正确做法是：
- 显式声明
transition: box-shadow 0.3s ease，不依赖all - 如果同时用
transform（如translateY(-2px)），应一并列出：transition: box-shadow 0.3s ease, transform 0.2s ease - 避免在父容器上设
overflow: hidden，否则扩大的阴影会被裁剪，看起来像“突然弹出”
参数对齐才是平滑过渡的关键
box-shadow不是单个数值，而是由多个长度值+颜色组成的复合属性。浏览器只能在线性插值时逐项计算，一旦某一项缺失或单位不统一，就降级为硬切换。实操要点：
- 起始和结束的阴影都必须有相同数量的长度参数：x偏移、y偏移、blur半径、spread半径（哪怕设为
0也要写全） - 单位保持一致：全用
px，或全用rem，别混用 - 颜色统一用
rgba()，确保透明度可过渡；避免hsl()与rgb()混用 - 多层阴影要严格对应：如果默认写两层，hover也得是两层，顺序和参数一一对应
例如合法过渡：box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.05); → box-shadow: 0 6px 12px 2px rgba(0,0,0,0.15), 0 10px 20px 4px rgba(0,0,0,0.1);
移动端:hover不可靠，得换思路
纯CSS的:hover在手机和平板上基本不触发——这不是你的代码问题，是规范行为。用户点下去不会维持悬停态，所以阴影加深几乎看不到。可行方案只有两个：
- 用
@media (hover: hover) and (pointer: fine)包裹桌面端样式，彻底隔离触屏设备 - JavaScript监听
touchstart添加临时类（如.card.is-pressed），再用该类控制阴影；注意touchend后立刻移除，避免残留
千万别用:active替代——它只在手指按下的毫秒级瞬间生效，松手即消失，视觉反馈断裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
