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></span>、<a></a>）默认不支持box-shadow渲染，务必设display: inline-block或inline-flex
box-shadow 和 transition。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
