:hover 时用 transition 平滑加深 box-shadow 需设基础阴影、显式声明 transition，并调优 blur-radius、offset-y 和 alpha 值以增强纵深感，避免 none 起始值或 overflow 裁剪导致失效。
hover 时用 transition 平滑加深 box-shadow
直接在 :hover 里改 box-shadow 值是可行的，但如果不加 transition，阴影会突兀跳变。关键不是“能不能加深”，而是“怎么加深得自然”。box-shadow 是可过渡（animatable）的 css 属性，但必须显式声明过渡行为。
- 只写
transition: box-shadow 0.2s ease;就够了，不用写all - 起始状态（非 hover）的
box-shadow值不能是none，否则过渡会失效——浏览器无法从none插值到具体值 - 推荐始终设一个基础阴影，比如
box-shadow: 0 2px 4px rgba(0,0,0,0.1);，再在 hover 中增强
hover 中 box-shadow 的参数怎么调才显得“加深”
“加深”不等于单纯加大 blur 或 spread，而是增强视觉重量感。重点调三个参数：
-
blur-radius：增大它会让阴影更“蓬松”，但过大会模糊焦点；建议 hover 时比常态高 4–8px（如从4px→12px） -
offset-y：略微增加（如2px→4px）能强化“下沉感”，模拟卡片被按下的物理反馈 -
rgba()的 alpha 值：这是最直接的“加深”手段，比如从rgba(0,0,0,0.1)提到rgba(0,0,0,0.25)
常见失效原因：伪类选择器权重或继承干扰
写了 .card:hover { box-shadow: ... } 却没反应？大概率是以下情况之一：
- 父容器有
overflow: hidden，把扩大的阴影裁掉了——检查并确保父元素留出足够溢出空间 - 卡片本身设置了
position: relative但 z-index 太低，阴影被其他元素盖住 - CSS 优先级冲突：比如某个全局样式用
!important锁死了box-shadow，hover 规则被忽略 - 用了
transform: scale(...)同时 hover，某些旧版 safari 会中断阴影过渡，建议避免同时触发多个重绘属性
.card { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: box-shadow 0.2s ease; } .card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }真正容易被忽略的是：阴影加深的本质是提升对比度与纵深感，而不是堆参数。如果卡片背景是深色，反而要降低 alpha 值，否则 hover 会发灰；如果页面已有大量投影，统一用同一套 shadow Token（比如定义为 CSS 变量）比硬编码更可控。