卡片悬停阴影变深需通过box-shadow配合:hover实现，关键在于blur-radius、spread-radius和opacity的协调调整，并添加transition平滑过渡，避免布局抖动与视觉失真。
卡片悬停阴影变深的 CSS 实现原理
直接用 box-shadow 配合 :hover 就能实现，关键不是“能不能”，而是阴影参数怎么调才自然——太深像浮起太高，太浅又没反馈。核心是控制 blur-radius、spread-radius 和 opacity 的组合，而不是只加大数值。
基础写法：用 transition 平滑过渡
阴影变化必须加 transition，否则会突兀跳变。只过渡 box-shadow 属性，避免连带影响其他样式：
.card {
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: box-shadow 0.2s ease;
}
.card:hover {
box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}
-
ease比linear更符合视觉惯性，别用ease-in-out——悬停时加速再减速反而显得拖沓 - 避免在
:hover里改transform: translateY(-2px)同时加阴影，这会让布局抖动，除非你明确需要“抬起”效果 - RGBA 的 alpha 值建议从
0.1→0.2或0.25，超过0.3在多数背景上就显得脏
响应式阴影：适配不同设备和缩放
PC 上看着刚好，手机上可能过重。用 @media 降级移动端阴影强度更稳妥：
@media (max-width: 768px) {
.card {
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.card:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
}
- 移动端优先降低
blur-radius（比如从12px→8px），高斯模糊在小屏上容易糊成一片 - 不要依赖
prefers-reduced-motion自动关阴影——很多用户根本不开这个设置，主动提供轻量 fallback 更可靠 - 如果卡片本身有
border-radius，确保box-shadow的 spread 值不超过圆角值，否则阴影边缘会生硬断裂
常见踩坑：z-index 和父容器溢出
阴影突然被截断？大概率是父容器设置了 overflow: hidden，或者卡片层级被盖住：
- 检查父级是否有
overflow: hidden或clip-path，阴影属于绘制层，会被裁剪 - 给卡片加
position: relative和z-index: 1，防止 hover 时被兄弟元素遮挡 - 别在
body或html上设filter: blur()类全局效果——它会让所有子元素阴影发虚，且无法单独关闭 - 使用
will-change: box-shadow对性能几乎无提升，Chrome 已优化这类动画，加了反而可能触发多余图层合成
阴影深度感知很主观，最终得在真实设备上快速扫几眼——盯着看反而判断失真。调完扔给同事瞄三秒，问“悬停是不是明显但不吓人”，比任何理论都准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
