box-shadow transition 失效主因是起始/结束值结构不匹配或初始值为none；须统一层数、单位、颜色格式，显式设基础阴影，并用:focus-within或JS适配移动端。
直接给 box-shadow 加 :hover 和 transition 很容易，但“复杂渐变”往往卡在视觉断层、移动端失效或高 DPI 下糊边——核心不是参数调多大，而是让浏览器能稳定插值。
box-shadow transition 失效的常见原因
浏览器不会从「无阴影」平滑过渡到「有阴影」，必须显式声明初始值；同时，两组 box-shadow 的层数、顺序、单位类型必须严格一致，否则直接跳变。
- 默认状态漏写
box-shadow: 0 2px 6px rgba(0,0,0,0.1);（哪怕值很小），:hover才有起点可插值 - 避免基础态写一层、悬停态写两层：如
box-shadow: 0 2px 6px red;→box-shadow: 0 2px 6px red, 0 8px 24px blue;，浏览器不识别为“叠加”，而是“结构不匹配”，直接跳变 - 统一用整数：
0 2px 6px可以，0 1.5px 4.2px在 Safari 或高 DPI 屏上会渲染失真甚至禁用过渡 - 别依赖
transition: all 0.3s ease：它可能触发background-color等无关属性重绘，且某些旧版 Chrome 对all中box-shadow的插值支持不完整
实现自然“浮起+扩散”双动效的关键参数组合
人眼对“抬升感”的信任度远高于“变黑感”，所以重点不是加大阴影强度，而是协调 offset-y、blur-radius 和轻微 transform 的节奏。
- 基础态推荐：
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.1);（轻、低、透） - 悬停态推荐：
box-shadow: 0 6px 16px -2px rgba(0,0,0,0.15);（y 偏移增大模拟上浮，负spread-radius收紧边缘，避免阴影“炸开”） - 搭配
transform: translateY(-2px)真实抬升卡片位置，但必须同步调整box-shadow的offset-y，否则阴影与卡片错位 -
transition必须拆开写：transition: box-shadow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);—— 这个贝塞尔曲线比ease更接近物理惯性，进效快出效缓
移动端点击无响应或“闪一下就消失”的解决路径
iOS/Android 没有持续 hover，:hover 仅对可聚焦元素（如 <a></a>、<button></button>）在点击后短暂触发。纯 div.card 在触摸设备上基本无效。
立即学习“前端免费学习笔记（深入）”；
- 最简兼容方案：给卡片加
tabindex="0"，再用&:focus-within模拟（需现代 CSS 支持） - 稳妥方案：用 JS 监听
touchstart，动态添加 class，例如card--hovered，CSS 中写.card:hover, .card--hovered { ... } - 注意：不要只监听
click，它有 300ms 延迟；touchstart更即时，且需在touchend后清除 class，避免状态残留 - 若用
transform抬升，务必确认父容器没设overflow: hidden—— 否则卡片上移时会被裁掉，阴影也跟着消失
高 DPI / Safari 下阴影发虚或不动的绕过方式
Safari 对小数值 box-shadow 渲染不稳定，Windows 高 DPI 缩放后 px 单位也可能亚像素失真。这不是 bug，是渲染机制限制。
- 优先改用
filter: drop-shadow(0 6px 16px rgba(0,0,0,0.15));：它不受盒模型限制，不被overflow: hidden裁剪，且 Safari 对filter的插值更可靠 - 若必须用
box-shadow，模糊半径别小于2px，1px在 Retina 屏上几乎不可见；blur-radius和spread-radius全部取整 - 避免在
box-shadow中混用单位，如0 2px 6px 0.1em—— 浏览器无法插值不同单位 - 极端情况可加
will-change: box-shadow;强制合成层，但仅用于高频交互卡片，别全局滥用
真正难的不是写出“能动”的阴影，而是让所有设备、所有缩放比例、所有焦点状态下，阴影都保持节奏一致——这要求你把每一层 box-shadow 当作一个独立可动画的变量来管理，而不是堆参数碰运气。
