能，但必须用可插值的数值（如 rgba(0,0,0,0)）替代 none；否则 transition 失效。需在默认和 hover 状态均声明 transition，避免 safari 兼容问题，必要时加 opacity 或 will-change 辅助。
box-shadow 能直接用 transition 动画吗
能，但有前提：必须从一个明确的 box-shadow 值过渡到另一个明确的值，不能从 none 到有阴影，也不能依赖浏览器自动补全“无阴影”状态。
常见错误现象是加了 transition: box-shadow 0.3s 却毫无动画——因为初始状态写的是 box-shadow: none，而 none 不是可计算的长度值，浏览器无法插值。
- 正确做法：初始状态用
box-shadow: 0 0 0 rgba(0,0,0,0)（完全透明、零偏移零模糊） - 悬停或激活时改为
box-shadow: 0 4px 12px rgba(0,0,0,0.15) - 避免写
box-shadow: none作为起始/终点，它会中断 transition
css transition 监听 box-shadow 变化的写法
关键不是“监听”，而是让两个状态都具备可动画的数值属性。transition 本身不监听，只作用于属性变化过程。
使用场景包括卡片 hover、点击展开、焦点获取等需要视觉反馈的地方。
立即学习“前端免费学习笔记（深入）”；
- 必须显式声明要过渡的属性：
transition: box-shadow 0.3s ease（不推荐all，易引发意外重绘） - 如果同时改颜色和阴影，分开写更可控：
transition: box-shadow 0.3s ease, background-color 0.2s ease - 注意
ease是默认缓动，若要更自然的淡入感，可用cubic-bezier(0.25, 0.46, 0.45, 0.94)（类似 Material 的标准缓动）
为什么 hover 后阴影没淡出，而是突兀消失
本质是离开时的过渡被忽略或覆盖，常因选择器优先级或状态覆盖导致。
性能影响不大，但体验断层明显，用户会觉得“卡了一下”。
- 确保 :hover 和默认状态都定义了
box-shadow，且都带transition - 不要只在 :hover 里写
transition，它只控制进入动画；离开动画需由默认状态的 transition 承担 - 检查是否被其他规则（如内联 style、!important、更高优先级选择器）覆盖了 transition 或 box-shadow
- 移动端要注意 focus 状态也要同步处理，否则键盘用户看不到阴影变化
兼容性与 Safari 的特别坑
Safari（尤其 ios 15–16）对 box-shadow 的 transition 支持不稳定，偶尔会跳帧或首次不触发。
这不是 bug，是渲染管线对透明度插值的优化策略不同。
- 绕过方式：加一个极小的 opacity 变化辅助触发硬件加速：
transition: box-shadow 0.3s ease, opacity 0.001s - 或者强制开启 GPU 加速：
will-change: box-shadow（仅在必要时加，避免过度使用） - 不要依赖
inset阴影 + transition，部分旧版 Safari 对 inset 插值支持差
过渡的关键不在“监听”，而在两个状态都提供可插值的数值；none 是静默杀手，rgba(0,0,0,0) 才是真正的“无感起点”。