直接加box-shadow不加transition会导致悬停阴影“啪”一下跳变；必须精准声明transition: box-shadow 0.2s ease，避免用all，同时协调y-offset、blur-radius和rgba alpha值变化，并兼顾移动端与高dpi屏适配。
直接加 box-shadow 不加 transition，悬停时阴影会“啪”一下跳变，不是平滑过渡——关键不是阴影值设多大，而是过渡属性是否精准作用于它。
只过渡 box-shadow，别用 all
很多人写 transition: all 0.3s ease，结果卡片里文字、边框、背景色全跟着动，干扰焦点。阴影变化应该独立控制：
- 明确写
transition: box-shadow 0.2s ease，避免意外触发其他属性动画 -
ease比linear更自然，ease-in-out在悬停瞬间有减速感，反而显得迟滞 - 如果卡片同时用了
transform: translateY(-2px)，记得把transform也加进 transition：transition: box-shadow 0.2s ease, transform 0.2s ease
阴影参数别乱堆数值，重点调三组差值
平滑过渡的前提是“正常态 → 悬停态”的变化可感知但不突兀。盯着这三项调：
-
y-offset：从2px到8px或10px，模拟抬升距离 -
blur-radius：从4px到16px，模糊加大才显“柔”和“远” -
rgba的 alpha 值：从0.1到0.15或0.18，超过0.25在浅色背景上容易发灰
示例：.card { box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: box-shadow 0.2s ease; } .card:hover { box-shadow: 0 10px 16px rgba(0,0,0,0.15); }
移动端和高DPI屏要单独处理
大阴影在小屏上会撑满视口，高DPI屏（如 MacBook Retina）下默认模糊半径可能渲染过重：
- 加媒体查询缩窄阴影：
@media (max-width: 768px) { .card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12); } } - 避免用
px单位写死模糊值，改用rem或保持相对比例更稳妥 - 某些安卓 WebView 对多重阴影支持差，双层
box-shadow（如环境光+接触阴影）慎用
真正难的不是写出悬停效果，而是让阴影“呼吸”而不是“砸下去”——差值够、过渡准、设备适配细，三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
