.card 加 border-radius 仍溢出是因为未设 overflow: hidden，子元素（如图片、绝对定位 badge）会突破圆角区域；Bootstrap 5 默认有 overflow: hidden 但仅对标准结构有效，Bootstrap 4 需手动添加；最稳妥方案是 .card { border-radius: 12px; overflow: hidden; transform: translateZ(0); }。
为什么 .card 加了 border-radius 还会溢出？
因为 Bootstrap 的 .card 默认没有设置 overflow: hidden，而圆角（border-radius）本身不自动裁剪子元素。当卡片里有图片、按钮或自定义组件超出容器边界时，尖角依然会露出来——尤其是 .card-img-top 这类绝对定位或未约束尺寸的元素。
常见错误现象：border-radius 看起来“没生效”，实际是子内容撑出了圆角区域，浏览器只裁剪了边框弧度，没裁剪内容。
- 必须显式加
overflow: hidden才能触发裁剪 - Bootstrap 5+ 的
.card已预设overflow: hidden，但仅对标准结构（如.card-img-top+.card-body）有效；一旦嵌套position: absolute、transform或自定义height，仍可能破界 - 若用的是 Bootstrap 4，
.card默认overflow: visible，必须手动覆盖
如何给卡片加圆角并确保内容不溢出
最稳妥的方式是组合使用两个 CSS 属性：圆角 + 溢出隐藏。不需要额外 class，直接在 .card 上覆盖即可。
.card {
border-radius: 12px;
overflow: hidden;
}
如果项目中已引入 Bootstrap 5，可复用其内置的 rounded- 工具类，但注意它不带 overflow：
-
<div class="card rounded-3">→ 只加圆角，不隐藏溢出 -
<div class="card rounded-3 overflow-hidden">→ 正确组合（overflow-hidden是 Bootstrap 5 内置工具类） - Bootstrap 4 没有
overflow-hidden工具类，需自行加样式或写class="overflow-hidden"并在 CSS 中定义
图片顶部溢出的典型场景怎么处理
当使用 .card-img-top 时，如果图片宽高比和卡片不匹配，又没设 object-fit，容易在圆角处露出多余边缘。这不是卡片问题，而是图片渲染行为。
- 给
.card-img-top加object-fit: cover，并确保父容器（即.card）有明确高度或overflow: hidden - 避免对
.card-img-top单独设border-radius，否则和卡片圆角错位 - 若图片是背景图（比如用
background-image），记得同时加background-size: cover和background-origin: border-box，否则圆角裁剪可能从 padding 区开始算
示例修正：
<div class="card rounded-3 overflow-hidden"> <div class="card-img-top" style="height: 200px; background: url(...) center/cover;"></div> <div class="card-body">...</div> </div>
自定义子元素（如 badge、icon）破界怎么办
卡片右上角加 .badge、浮动 .position-absolute 图标等，常因脱离文档流而绕过 overflow: hidden 裁剪——这是 CSS 规范限制：overflow 对 position: absolute 子元素无效，除非父元素是 stacking context（比如有 transform、will-change 或 filter）。
- 方案一：给
.card加transform: translateZ(0)或will-change: transform，强制创建 stacking context，使overflow: hidden对绝对定位子元素生效 - 方案二：不用
position: absolute，改用margin+float或flex布局把 badge 塞进.card-header或.card-body内部 - 方案三：接受小范围破界，用
clip-path: inset(0 0 0 0 round 12px)替代border-radius+overflow，但兼容性略差（IE 不支持）
简单起见，多数项目选方案一，一行 CSS 就行：
.card {
border-radius: 12px;
overflow: hidden;
transform: translateZ(0);
}
真正容易被忽略的是 stacking context 这一层——很多人只盯着 border-radius 和 overflow，却没意识到绝对定位元素天然“飘”在裁剪区域之外。调样式前先打开浏览器开发者工具，勾选 “Paint flashing” 或看 computed styles 里的 stacking context 是否成立。
