box-shadow 必须显式声明 transition 才能平滑过渡，否则悬停时会突变；需在初始状态设具体值而非 none，并保持阴影结构、层数、颜色格式一致，注意移动端兼容性及行内元素的 display 设置。

box-shadow 本身不会自动过渡，必须显式加 transition 才能有平滑变化。不写 transition，悬停时阴影就是“啪”一下跳变，毫无动画感。

必须声明 transition 属性

浏览器默认对 box-shadow 做零延迟切换，哪怕只改一个参数（比如模糊半径），也得靠 transition 插帧。常见错误是只写了 :hover 样式，却漏掉原始元素上的 transition 声明。

• transition: box-shadow 0.3s ease; 最简写法，推荐优先用这个，避免 all 拖慢重绘
• 多个属性要过渡？分开写更可控：transition: box-shadow 0.2s ease, transform 0.2s ease;
• 别在 :hover 里写 transition —— 它只作用于「离开」时；初始状态才决定「进入」是否平滑

box-shadow 值必须完整且可插值

CSS 动画引擎只能对「结构一致」的 box-shadow 值做数值插值。如果默认值是 none，而 :hover 是 0 4px 8px rgba(0,0,0,0.2)，第一次悬停会从 none 突变到完整值，看起来像卡顿。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 始终用具体值初始化：box-shadow: 0 2px 4px rgba(0,0,0,0.1);，而不是 none 或空值
• 多层阴影要保持层数和顺序一致，例如：box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 0 0 2px #eee; → :hover 也得两层，不能删掉第二层
• RGBA 颜色比 HEX 更安全，因为透明度（alpha）能被连续插值；hsl(0,0%,0%) 也可，但避免混用 black 和 rgba(0,0,0,0.2)

移动端和旧版 Safari 的兼容性陷阱

部分 iOS Safari（尤其是 15.x 之前）对 box-shadow + transform 同时过渡有渲染 bug：阴影可能消失、闪烁，或过渡卡在中间帧。

• 给容器加 will-change: transform, box-shadow; 可提前触发 GPU 加速（但别滥用，会增加内存开销）
• 若只用于悬停，优先用 transform: translateY(0) 触发硬件加速，比单纯 will-change 更稳妥
• 行内元素（如 <span>、<a>）默认不支持 box-shadow 渲染，务必设 display: inline-block 或 inline-flex

真正容易被忽略的是：过渡效果是否在「首次悬停」就生效。很多人测试时反复 hover 已经生效了，但用户第一次访问页面时，那个突兀的初始跳变依然存在——这说明你没在非 hover 状态下设好基础 box-shadow 和 transition。