bootstrap卡片圆角失效的根本原因是容器未设置overflow: hidden，需在.card上同时添加border-radius和overflow: hidden以裁切溢出内容；确保.card-img-top为直接子元素，避免布局遮挡，并注意box-sizing、margin等引发的意外裁切。
卡片图片圆角失效：没加 overflow: hidden
Bootstrap 卡片（.card）里放图片，默认不会自动裁切圆角，哪怕你给 .card-img-top 或图片本身加了 border-radius，边缘依然会“露出来”。根本原因是卡片容器没设 overflow: hidden，圆角只是视觉修饰，不阻止内容溢出。
实操建议：
- 必须在包裹图片的卡片元素（通常是
.card或.card-img-top的父容器）上设置overflow: hidden - 推荐加在
.card上，而不是只加在图片上——这样能同时约束顶部图、底部图、甚至内嵌的其他浮动内容 - 如果用的是 Bootstrap 5+，
.card默认没有overflow: hidden，得手动补
Bootstrap 5 中 .card-img-top 的 border-radius 不生效？检查层级和继承
很多人给 .card-img-top 直接写 border-radius: .5rem，但发现左上、右上圆角有，下边却还是直角——其实是被卡片内容区（.card-body）顶上来了，视觉上“吃掉”了圆角。这不是样式没生效，而是布局遮挡。
实操建议：
- 确保
.card-img-top是.card的**直接子元素**，中间别套多余div - 不要只依赖
.card-img-top自带的border-radius（Bootstrap 5 默认只设border-top-left-radius和border-top-right-radius），需显式补全四个角或按需覆盖 - 若需整张卡片统一圆角（含底图），把
border-radius加到.card上，并同步加overflow: hidden
圆角 + 溢出隐藏导致图片被意外裁切？注意 padding 和 box-sizing
加了 overflow: hidden 后，图片边缘被切掉一截，尤其当图片用了 object-fit: cover 或设置了负 margin 时。常见于自定义卡片内边距后未重置盒模型。
实操建议：
- 确认
.card或图片容器的box-sizing是border-box（Bootstrap 默认已是，但自定义 CSS 可能覆盖） - 避免对
.card-img-top使用margin: -1rem这类“拉伸”手段，它会让图片实际渲染区域超出容器边界，触发裁切 - 如需微调图片位置，优先用
object-position，而非 margin 或 transform - 调试时临时加
outline: 1px solid red到卡片上，看清容器真实范围
兼容性与性能提醒：overflow: hidden 在 Safari 和旧版 Android WebView 的表现
绝大多数现代浏览器对 overflow: hidden + border-radius 组合支持良好，但 Safari 15.4 之前、部分 Android 7–9 的 WebView 会出现圆角裁切不干净（仍有像素级毛边）或硬件加速异常（滚动卡顿）。
实操建议：
- 如需极致兼容，可加
transform: translateZ(0)或will-change: transform触发 GPU 加速（仅限必要场景，别滥用） - 避免在
.card上同时设overflow: hidden和animation，某些安卓低版本会闪屏 - 不用
clip-path: border-radius()替代——它在 Safari 中不支持数值单位（如0.5rem），且性能更差
真正容易被忽略的点是：圆角是否生效，不取决于你给谁写了 border-radius，而取决于「哪个容器承担裁切责任」。这个容器必须同时满足两个条件——有圆角、且设了 overflow: hidden。少一个，图片就敢往外跑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
