卡片悬停阴影没反应，根本原因是:hover伪类未生效或transition缺失；需检查选择器是否正确、pointer-events是否阻止事件、overflow:hidden是否裁剪阴影，并确保box-shadow写在:hover规则中且默认状态声明transition: box-shadow 0.3s ease。
卡片悬停阴影为什么没反应？检查 CSS 选择器和 transition
最常见的原因是 :hover 伪类没生效——要么父容器阻止了事件冒泡（比如加了 pointer-events: none），要么选择器写错了（例如写成 .card:hover .shadow 却忘了 .shadow 并不存在）。必须确保阴影效果写在卡片自身上，且搭配 transition 才有渐变感。
-
box-shadow必须写在:hover触发的元素上，不能只写在默认状态里（否则没变化） -
transition要加在默认状态（非 hover），推荐写全：transition: box-shadow 0.3s ease; - 避免用
!important强覆盖——它可能掩盖真实优先级问题 - 如果卡片用了
overflow: hidden，阴影会被裁剪，需给容器留出空间（如加padding或用transform: translateZ(0)触发层叠上下文）
用纯 CSS 实现卡片悬停阴影的最小可行代码
不需要 JS，也不依赖框架。关键就三行：box-shadow、transition 和正确的 :hover 绑定位置。下面是最简可运行结构：
<div class="card">
<h3>标题</h3>
<p>内容</p>
</div>
<p>.card {
padding: 1rem;
border-radius: 8px;
background: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1); /<em> 默认浅阴影 </em>/
transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover {
box-shadow: 0 6px 16px rgba(0,0,0,0.18); /<em> 悬停加深加远 </em>/
}</p>
注意 cubic-bezier(0.4, 0, 0.2, 1) 比 ease 更顺滑；数值越大阴影越“重”，但超过 rgba(0,0,0,0.25) 在浅底色上容易显得脏。
移动端悬停失效？别指望 touch 设备有 :hover
真机上 :hover 大概率不触发——iOS Safari 和多数安卓浏览器只在模拟鼠标时临时支持，且无明确“悬停”概念。实际项目中必须考虑降级或替代方案：
- 对触屏设备，改用
:active做点击反馈（但仅瞬时，无法保持） - 用媒体查询检测指针精度：
@media (hover: hover) and (pointer: fine)包裹悬停样式，避免污染触屏体验 - 若需一致交互，建议用 JS 监听
touchstart/touchend切换 class，再配合 CSS 过渡 - 别在卡片上同时依赖
:hover和focus做同一效果——键盘用户可能卡在焦点态，视觉残留难清除
阴影太“浮”或太“沉”？调整 box-shadow 的四个参数
box-shadow 四个值顺序固定：offset-x offset-y blur-radius spread-radius color。最容易调错的是前两个偏移和模糊半径：
-
offset-y正值向下投射，负值向上——卡片常用0 4px表示轻微下沉感 -
blur-radius越大越“虚”，但过大（>24px）会丢失立体感，建议 4–16px 区间微调 -
spread-radius为正时扩大阴影范围，常用于强化轮廓（如0 4px 12px 2px rgba(0,0,0,0.1)） - 颜色用
rgba()控制透明度比hsla()更直观；黑色rgba(0,0,0,0.12)是 Material Design 推荐起始值
真正难的是让阴影匹配设计系统里的“高度层级”——比如卡片本身 z-index 是 2，那它的阴影强度就得比 z-index=1 的按钮更明显，否则视觉逻辑就乱了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
