box-shadow 的 transition 默认不生效是因为起始值与结束值结构不匹配，需确保阴影参数数量、单位、颜色格式完全一致才能线性插值；同时移动端需用 touch 事件替代 :active 伪类，并预留溢出空间防裁剪。

box-shadow 的 transition 为什么默认不生效

直接给 box-shadow 加 transition 却没动画？不是写法错，是值类型不匹配。CSS 过渡要求起始值和结束值能线性插值，而 box-shadow 是复合属性（偏移、模糊、扩散、颜色），浏览器只对「同结构、同单位、同颜色格式」的阴影做平滑过渡。比如从 box-shadow: 0 2px 4px rgba(0,0,0,0.1) 到 box-shadow: 0 6px 12px rgba(0,0,0,0.3) 可以动；但若中途加了 inset、换用 hsl() 颜色，或一边带第四项（spread）另一边不带，过渡就直接跳变。

• 确保起始和结束的 box-shadow 都有相同数量的长度值（x、y、blur、spread），且单位一致（全用 px 或全用 rem）
• 颜色统一用 rgba() 或 hsla()，避免混用 #fff 和 rgb(255,255,255)
• 别漏掉 transition-property —— 写成 transition: all .2s 看似省事，但会意外触发其他属性动画；明确写 transition: box-shadow .2s 更稳妥

:hover 和 :active 状态下阴影加深的写法差异

用户点卡片时想要“按下去”的反馈，光靠 :hover 不够——鼠标悬停不等于点击。真交互得靠 :active，但它持续时间极短（毫秒级），直接加深阴影可能来不及感知。更可靠的做法是结合 JavaScript 控制类名，或用伪类组合增强反馈。

• :hover 适合预览态：轻微加深，比如从 0 2px 4px rgba(0,0,0,0.1) 到 0 4px 8px rgba(0,0,0,0.15)
• :active 适合点击瞬态：再加一层压感，如 0 1px 2px rgba(0,0,0,0.25)，但必须配 transition-timing-function: ease-out 让它“弹”回来
• 如果要保留“按下后保持高亮”，不能依赖伪类——得用 JS 切换 .is-pressed 类，并在该类里定义更深的 box-shadow

移动端点击阴影失效的常见原因

iOS Safari 和部分安卓 WebView 默认禁用非 touchstart 触发的 :active，导致卡片点了没反应。这不是 CSS 错，是浏览器策略。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 给卡片加 cursor: pointer 能唤醒部分 iOS 的 :active 行为（但不保证）
• 更稳的方式：监听 touchstart 添加临时类，touchend 移除，用这个类控制阴影
• 注意 transition 在低性能设备上可能卡顿，把时长控制在 .2s 以内，避免同时过渡多个属性
• 别忘了加 -webkit-tap-highlight-color: transparent 去掉 iOS 点击灰斑，否则会干扰阴影视觉

阴影加深时容易忽略的布局抖动问题

box-shadow 本身不占布局空间，但加深后如果模糊半径（blur）或扩散半径（spread）变大，边缘像素可能溢出父容器，触发滚动条或遮挡相邻元素——尤其当卡片用 overflow: hidden 包裹时，阴影会被裁掉。

立即学习“前端免费学习笔记（深入）”；

• 检查父容器是否设置了 overflow: hidden，如有，给卡片加 margin 预留阴影空间（比如加深后 blur + spread 总和是 12px，就加 margin: 6px）
• 避免用 inset 阴影模拟加深效果——它会向内收缩，视觉上反而像“陷进去”，和预期相反
• 深色背景上加深阴影不明显？改用对比更强的 rgba(0,0,0,0.4) 而非单纯加大 blur 值

实际用的时候，最常卡住的不是语法，而是阴影值结构不一致导致过渡静默失败，以及移动端伪类失灵却还在死磕 CSS。把值对齐、加好类名钩子、预留好溢出空间，基本就稳了。