transition必须写在默认状态且显式声明box-shadow，否则无效；需避免all过渡、保持阴影结构一致、注意overflow裁剪和堆叠上下文。
直接加 transition 不生效，是因为没写对作用对象和属性——阴影变化必须显式声明 transition: box-shadow，且只能写在默认状态（非 :hover）里。
box-shadow 的 transition 必须写在默认状态
很多人把 transition 写在 :hover 里，结果悬停时毫无动画。CSS 过渡只在「属性值变化时」触发，而浏览器需要提前知道“哪些属性要过渡”，这个声明必须放在元素的常态样式中。
-
transition写在:hover中完全无效 - 写
transition: all 0.3s会连color、border一起动，干扰视觉焦点 - 推荐只过渡关键属性：
transition: box-shadow 0.25s ease, transform 0.25s ease - 时间选
0.2s–0.25s最稳：短于0.15s感觉不到动，长于0.3s显拖沓
悬浮立体感靠两层阴影 + v-offset 同步位移
单层 box-shadow: 0 4px 8px rgba(0,0,0,0.2) 只是“浮”，不是“立”。真正立体需要方向感：顶部高光 + 底部投影，且悬停时 transform: translateY() 和 box-shadow 的垂直偏移（第二参数）必须数值接近、方向一致。
- 常态示例：
box-shadow: 0 -1px 0 1px rgba(255,255,255,0.3), 0 2px 6px -2px rgba(0,0,0,0.08)（前为高光，后为投影） - 悬停时若用
transform: translateY(-2px)，则box-shadow第二参数建议调为0或1px，避免影子“吊在半空” - 深色背景上高光色别用纯白，改用
rgba(255,255,255,0.2)防刺眼 - IE11 不支持多层阴影？降级写法：
box-shadow: 0 1px 2px -1px rgba(0,0,0,0.1)
overflow: hidden 会吃掉阴影，别盲目套容器
表格、卡片、导航栏加了阴影却看不见，90% 是父容器设了 overflow: hidden 或 border-collapse: collapse。阴影是脱离文档流的绘制层，会被裁剪边界直接截断。
立即学习“前端免费学习笔记（深入）”；
- 给
table加阴影？必须套一层<div class="table-wrapper">，并在该div上设box-shadow和overflow: hidden - 给
img加阴影？先确保它不是纯行内元素：display: inline-block或display: block - 圆角 + 阴影组合？
border-radius和overflow: hidden必须同时加在外层容器上，否则圆角处阴影溢出 - Flex 容器常暗含
overflow: hidden，检查 computed styles 确认
最易被忽略的是堆叠上下文——即使阴影参数全对，如果父元素 z-index 太低或被其他层盖住，阴影依然不可见。真机测试前，先用浏览器 devtools 的「Layers」面板确认阴影是否渲染在独立合成层上。
