卡片悬停阴影变深需通过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 降级移动端阴影强度更稳妥：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

@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 已优化这类动画，加了反而可能触发多余图层合成

阴影深度感知很主观，最终得在真实设备上快速扫几眼——盯着看反而判断失真。调完扔给同事瞄三秒，问“悬停是不是明显但不吓人”，比任何理论都准。