hover时box-shadow“变深”需调高颜色透明度（如rgba(0,0,0,0.2)→0.4）并微增垂直偏移（2px→4px），避免只增模糊值；transition须写在基础选择器而非:hover中，推荐transition: box-shadow 0.2s ease；注意ie10–11不支持inset+transition组合，safari 9–12多层阴影过渡不稳定；若阴影加深却无浮起感，应检查overflow:hidden、z-index及position:relative设置。
hover时box-shadow变深的常见写法
直接改box-shadow的第三个值（模糊半径）或第四个值（扩散半径）并不能让阴影“变深”，真正起作用的是第一个值（水平偏移）、第二个值（垂直偏移）和最关键的颜色透明度。阴影“加深”其实是人眼对颜色浓度和距离感的综合判断。
实操建议：
- 优先调高
box-shadow中颜色的rgba()alpha 值（比如从rgba(0,0,0,0.2)→rgba(0,0,0,0.4)），这是最直观的加深方式 - 配合微增垂直偏移（如
2px→4px），模拟物体“下沉”带来的视觉加厚感 - 避免只加模糊值（如
10px→20px），容易让阴影发虚、失焦，反而显得更轻
为什么transition要写在非hover规则里
把transition写在:hover伪类里是新手高频错误，会导致鼠标移入时有动画，但移出时阴影瞬间消失——因为移出后样式规则被丢弃，过渡失效。
正确做法：
-
transition必须定义在基础选择器上（比如.card），而非.card:hover - 只过渡
box-shadow本身，不要用all，否则可能意外触发其他属性动画（如color抖动） - 推荐写法：
transition: box-shadow 0.2s ease;，0.2s 是人眼可感知又不拖沓的临界值
IE 和旧版 Safari 的兼容性坑
box-shadow在 IE9+ 和 Safari 6.1+ 基本可用，但有两个隐藏雷区：
- IE10–11 不支持
inset阴影 +transition组合，hover 动画会直接跳变 - Safari 9–12 对多层
box-shadow（逗号分隔多个阴影）的过渡支持不稳定，建议 hover 时只变更其中一层，其余保持静态 - 如果必须兼容 IE10，可用
filter: drop-shadow()兜底，但它不支持inset且性能略差
阴影加深但元素没“浮起来”？检查z-index和父容器
有时阴影变深了，但视觉上还是平贴页面，大概率不是box-shadow问题，而是层叠上下文干扰：
- 父容器有
overflow: hidden会裁掉阴影，哪怕阴影值再大也白搭 - 兄弟元素的
z-index比当前元素高，会盖住阴影，看起来像没生效 - 元素自身没设置
position: relative，某些情况下z-index不生效，导致阴影被底层内容穿透
这种时候加个z-index: 1往往比调box-shadow参数更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
