transition 不能直接作用于 box-shadow 是因为其值含颜色、偏移、模糊等不可插值维度；必须满足结构一致、数值明确、颜色同类型三条件才能平滑过渡。
transition 不能直接作用于 box-shadow 的原因
直接写 transition: box-shadow 0.3s 看似合理，但实际常失效——根本原因是 box-shadow 值含多个不可插值的维度：颜色、偏移量、模糊半径、扩散半径、inset 关键字。浏览器无法在不同格式间线性插值，比如从 box-shadow: 0 0 0 #000 到 box-shadow: 0 4px 12px rgba(0,0,0,0.15)，中间状态可能跳变或卡顿。
确保平滑过渡的三个必要条件
必须同时满足以下三点，否则哪怕写了 transition 也看不到渐变效果：
-
box-shadow的起始值和结束值结构必须完全一致：相同数量的阴影层、相同顺序的参数（x y blur spread color）、都带或都不带inset - 所有数值项（x/y/blur/spread）需为具体数字（如
0、4px），避免使用auto或initial这类非数值关键字 - 颜色必须同类型：全用
rgba()（推荐），或全用十六进制，避免混用#000和rgb(0,0,0)，否则 alpha 通道插值会出错
正确写法示例与常见错误对比
✅ 正确（结构对齐 + rgba 统一 + 数值明确）：
.card {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
transition: box-shadow 0.2s ease;
}
.card:hover {
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
}
❌ 错误写法及问题：
立即学习“前端免费学习笔记（深入）”；
-
box-shadow: none→ 浏览器将其解析为无阴影，与具体值结构不匹配，无法插值 -
box-shadow: 0 4px 12px #000→ 缺少 alpha，hover 时颜色突变，无透明度过渡 -
box-shadow: inset 0 0 0 #000→ 起始无inset，结束有，结构不一致直接中断动画
性能与兼容性提醒
box-shadow 过渡本身不触发重排（reflow），但高模糊值（如 >20px）或大量元素同时过渡仍可能引发重绘压力，尤其在低端移动设备上。建议：
- 模糊半径控制在
4px–16px区间，兼顾视觉与性能 - 避免在
:active或快速连续 hover 中频繁切换，可加will-change: box-shadow提前提示渲染引擎（仅在必要时） - IE10+ 支持
transition，但 IE 不支持多层box-shadow插值，若需兼容，只用单层且结构严格一致
最易被忽略的是颜色格式统一——哪怕其他都对，只要起始用 hsla()、结束用 rgba()，过渡就会降级为硬切。
