.card加border-0后悬停仍显边框，实因box-shadow未清除及transition未覆盖；需同时设border:none、box-shadow:none并重置hover阴影与tap-highlight-color。
为什么 .card 加 border-0 后悬停仍显边框？
直接给 .card 加 border-0 确实能去掉默认边框，但 Bootstrap 4 的 .card 默认有 box-shadow（尤其在悬停时通过 :hover 增强），视觉上会误判为“边框残留”。真正干扰悬浮体验的是阴影层级和过渡行为，不是 border 本身。
实操建议：
- 必须同时移除
border和重置box-shadow，否则悬停时阴影突变会像“闪边框” - Bootstrap 4 的
.card默认transition: all .2s ease-in-out，要覆盖它避免悬停抖动 - 若卡片内含
.card-img-top或.card-footer，它们可能自带 border，需单独处理
box-shadow: none 要写在哪一级选择器上才生效？
不能只写在 .card:hover 里——那样悬停时阴影消失，但“无边框感”只出现在悬停瞬间，常态下仍有默认浅阴影。正确做法是：从常态就清空，再按需加悬停效果。
推荐写法（直接覆盖 Bootstrap 默认）：
立即学习“前端免费学习笔记（深入）”；
.card.no-border {
border: none !important;
box-shadow: none !important;
transition: box-shadow .3s ease;
}
.card.no-border:hover {
box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
}
注意点：
-
!important是必要的，因为 Bootstrap 4 的.card规则权重高（如.card { box-shadow: 0 2px 4px rgba(0,0,0,.06); }） - 悬停阴影值建议用比默认更轻的
rgba(0,0,0,.08)，避免视觉过重，破坏“无边框”的轻盈感 - 不要用
filter: drop-shadow()替代box-shadow，它不触发硬件加速且在 Safari 下表现不一致
如何让卡片内容区（.card-body）不塌陷、保持呼吸感？
去掉边框和阴影后，.card-body 容易显得“贴边”或内容拥挤，尤其文字紧贴顶部/底部。这不是 bug，是 Bootstrap 4 的 .card-body 默认 padding（1.25rem）在无边框下对比度下降导致的错觉。
解决方法分场景：
- 若想保持原生间距但增强留白感：给
.card-body单独加padding-top: 1.5rem和padding-bottom: 1.5rem - 若卡片用于网格布局（如
.row > .col），建议在父容器加gap: 1.5rem（配合display: grid）而非依赖卡片内边距 - 绝对避免给
.card加margin来“撑开”，这会破坏 Bootstrap 的栅格对齐逻辑
移动端点击卡片时的灰色背景怎么关掉？
在 iOS Safari 和部分安卓浏览器中，点击无边框卡片会触发默认的 -webkit-tap-highlight-color 灰色遮罩，与“无边框悬浮”设计冲突，显得突兀。
必须显式禁用：
.card.no-border {
-webkit-tap-highlight-color: transparent;
tap-highlight-color: transparent;
}
补充说明：
- 仅加
transparent不够，iOS 旧版本需要-webkit-前缀 - 这个样式必须作用于可点击的卡片元素本身（比如带
data-toggle="modal"或href的卡片），不能只写在:hover里 - 如果卡片内嵌按钮或链接，它们的
tap-highlight需单独处理，不影响卡片主体
tap-highlight-color 和 transition 的组合影响——一个没关，点击后卡片“闪一下”；另一个没调，悬停时阴影跳变。这两处不处理，所谓“无边框悬浮”就只是半成品。 
