box-shadow 动画无效主因是属性值结构不一致或含不可插值关键词；需确保起始/结束状态单位统一、inset 一致，用透明色过渡而非 none，并在默认状态写 transition 且指定 property。
box-shadow 动画为什么没反应？
直接写 transition: box-shadow 0.3s 很可能无效——CSS 过渡只对「可计算的数值型属性」起作用，而 box-shadow 的值如果包含关键词（比如 inset）或单位不一致（px 混 em），浏览器就无法插值动画。
- 确保起始和结束状态的
box-shadow结构完全一致：偏移、模糊、扩散、颜色都用相同单位，且都不含inset或同时含inset - 避免从
none切换到有阴影：改用透明色过渡，比如box-shadow: 0 0 0 0 rgba(0,0,0,0)→0 4px 12px 0 rgba(0,0,0,0.15) - 别漏写
transition-property；只写transition: 0.3s不指定属性，不会触发box-shadow动画
:hover + transition 实现卡片悬停反馈
这是最常用也最容易翻车的场景：鼠标移入时加阴影，移出时平滑收回。关键不在写法多炫，而在控制「触发时机」和「视觉节奏」。
- 把
transition写在默认状态（非:hover），不是 hover 里——否则移入有动画，移出瞬间消失 - 推荐用
transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1)，比ease更自然，避免「弹跳感」 - 卡片本身要有
overflow: hidden，否则大模糊值阴影在圆角边缘会溢出、显得毛边 - 移动端慎用
:hover，它在 iOS Safari 上行为不稳定；优先考虑:focus-within或 JS 的mouseenter/mouseleave
用 JS 主动控制 shadow 强度做点击反馈
纯 CSS 的 :active 状态持续时间太短，且无法响应长按或触摸事件。想做更真实的「按下凹陷感」，得靠 JS 动态改 box-shadow 值。
- 监听
mousedown/touchstart，把阴影改成内凹式：box-shadow: inset 0 2px 6px rgba(0,0,0,0.1) - 监听
mouseup/touchend/touchcancel，恢复原阴影——漏掉touchcancel会导致手指滑出区域后状态卡住 - 别直接操作
style.boxShadow，用 class 切换更利于维护和复用，比如加is-pressed类，CSS 里定义对应阴影 - 注意性能：频繁修改
box-shadow不会触发布局（layout），但若同时改transform或opacity，建议加上will-change: transform, box-shadow提前提示渲染引擎
阴影层级与 z-index 冲突怎么办
卡片阴影明明写了，却总被旁边元素盖住——这不是 box-shadow 的问题，是层叠上下文（stacking context）搞的鬼。
立即学习“前端免费学习笔记（深入）”；
-
box-shadow永远绘制在元素自身背景和边框之上，但仍在父容器的层叠上下文中；如果父元素有z-index且不是 auto，子元素的阴影就受其限制 - 解决方法：给卡片加
position: relative和一个正z-index（哪怕只是1），强制它创建独立层叠上下文 - 避免在卡片上同时用
transform（如scale）和高z-index，某些旧版 Chrome 会出现阴影裁剪 - 检查是否误用了
filter: drop-shadow()：它生成的是「图像级」阴影，不受z-index控制，但也不参与层叠上下文计算——该用哪个，看你要的是「元素投影」还是「图像投影」
box-shadow，什么时候该切到 filter: drop-shadow()，或者干脆用伪元素画一层渐变遮罩模拟阴影。这些边界情况，文档里基本不提。 
