因为bootstrap 4的.card默认有边框且父容器常设overflow:hidden，导致box-shadow被视觉干扰或裁剪；需移除边框、设overflow:visible、加transition动效，并用自定义类如.card-shadowless覆盖以确保层级和响应式兼容。
为什么 .card 加 box-shadow 没反应？
Bootstrap 4 的 .card 默认有 border: 1px solid rgba(0,0,0,.125)，而 box-shadow 本身不会覆盖边框——它只是“浮在”边框外层。如果你直接给卡片加 box-shadow 却没看到明显悬浮感，大概率是因为边框干扰了视觉层次，或者阴影被父容器的 overflow: hidden 截断（比如放在 .card-deck 或某些栅格容器里）。
实操建议：
- 先移除默认边框：
.card { border: none; } - 确保父容器不裁剪阴影：
overflow: visible;（尤其检查是否嵌套在.container、.row或自定义 wrapper 中） - 用
transition补上动效，否则 hover 看起来生硬：transition: box-shadow .2s ease-in-out;
怎么写一个干净的无边框悬浮投影类？
别直接改 .card 全局样式，推荐新增一个修饰类，比如 .card-shadowless，兼顾复用性和可维护性。
示例 CSS：
.card-shadowless {
border: none;
}
.card-shadowless:hover {
box-shadow: 0 .5rem 1.2rem rgba(0,0,0,.15);
}
.card-shadowless:focus,
.card-shadowless:focus-within {
outline: none;
box-shadow: 0 .5rem 1.2rem rgba(0,0,0,.2);
}
说明：
-
0 .5rem 1.2rem是offset-x offset-y blur-radius，避免水平偏移让卡片“飘走”，只靠纵向位移+模糊制造悬浮感 - hover 和 focus 的阴影强度略有差异，兼顾鼠标悬停与键盘焦点可访问性
- 如果项目用了 Sass，可基于 Bootstrap 的
$box-shadow-sm/$box-shadow-lg变量定制，避免硬编码颜色和尺寸
移动端点击无反馈？需要补 :active 状态
在 iOS Safari 和部分安卓浏览器中，纯 :hover 在触摸设备上可能不触发，导致用户点下去没视觉反馈，误以为没响应。
解决方法是补充 :active，并配合 touch-action: manipulation 提升响应灵敏度：
.card-shadowless:active {
box-shadow: 0 .25rem .75rem rgba(0,0,0,.1);
}
.card-shadowless {
touch-action: manipulation;
}
注意点：
-
:active阴影要更轻、更紧凑，模拟“按下”而非“浮起” - 不要只依赖
:hover做交互反馈，Web 应用需同时覆盖指针与触控路径 - 若卡片内含
<a></a>或<button></button>，确保它们自身也处理了:active，否则阴影会跳变
为什么阴影在 Modal 或 Dropdown 里消失？
常见于把 .card-shadowless 放进 .modal-body、.dropdown-menu 或自定义 position: relative 容器时。根本原因是这些容器常设 overflow: hidden 或 z-index 层级压制，导致阴影被裁剪或压在底层。
排查步骤：
- 用浏览器开发者工具检查父元素是否含
overflow: hidden或clip-path - 确认卡片及其祖先是否有
z-index值；若父容器z-index: 1，卡片至少设z-index: 2才能让阴影正常渲染 - 临时加
outline: 1px solid red测试是否真被裁剪——如果 outline 也不见，基本就是 overflow 问题
修复优先级：先调 overflow，再调 z-index，最后考虑用 transform: translateZ(0) 强制创建新层叠上下文（慎用，可能引发重绘开销）。
真正麻烦的不是写几行 CSS，而是阴影效果依赖于整个 DOM 层级关系和渲染上下文——稍不注意，hover 一动，阴影就卡在别人家的 overflow 里出不来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
