直接加 border-radius 但图片不变圆，主因是父容器缺少 overflow: hidden、CSS 优先级不足或单位不响应式；Bootstrap 的 .rounded 类可快速实现，但需注意 .rounded-circle 要求图片宽高相等，且 v5 中推荐用 .rounded-1~.rounded-4 等 rem 单位类。
直接加 border-radius 但图片不变圆？检查是否被 Bootstrap 覆盖
Bootstrap（尤其是 v5+）默认给 <img alt="CSS如何为Bootstrap图片增加圆角效果_利用border-radius属性" > 加了 vertical-align: middle 和部分响应式样式，但关键在于：它**没重置 border-radius**。所以你写的 border-radius: 8px 理论上应该生效——如果没生效，大概率是 CSS 优先级或继承问题。
实操建议：
- 用浏览器开发者工具检查图片元素，看
border-radius是否被划掉（被更高优先级规则覆盖） - Bootstrap 的
.img-fluid或.rounded类本身不设border-radius，但.rounded是个例外——它设了border-radius: 0.25rem；如果你自己写border-radius: 4px，可能因单位不同或优先级低而失效 - 最稳写法是加
!important临时验证（上线前应改用更具体的选择器）：.my-rounded-img { border-radius: 8px !important; }
用 Bootstrap 内置类快速实现圆角，但要注意版本差异
Bootstrap v4.3+ 提供了 .rounded 系列工具类，v5 还增强了控制粒度。不用手写 CSS 就能搞定，但得看清文档细节。
常见错误现象：加了 .rounded 没反应，或者四个角圆得不一致。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- v4/v5 都支持
.rounded（全角）、.rounded-top、.rounded-circle（正圆）、.rounded-0（清零） -
.rounded-circle要求图片宽高相等，否则会拉伸成椭圆——这不是 bug，是预期行为 - v5 中新增
.rounded-1到.rounded-4，对应0.25rem~1.5rem，比手写像素值更适配响应式缩放 - 别把
.rounded和.img-fluid放反顺序：虽然一般不影响，但若自定义了 max-width，先.img-fluid再.rounded更稳妥
图片内容被裁切？overflow: hidden 缺失是主因
加了 border-radius 后，图片边缘看起来还是直角，甚至出现白边或错位——往往不是圆角没生效，而是容器没做裁剪。
使用场景：给带 padding 或 margin 的卡片内图片加圆角；或图片放在设置了 border-radius 的父容器里。
实操建议：
- 仅对
<img alt="CSS如何为Bootstrap图片增加圆角效果_利用border-radius属性" >元素设border-radius是不够的，必须确保其**渲染时所在的块级上下文支持裁剪** - 如果图片在
<div class="card"> 里，且你想让整个卡片带圆角并裁掉图片溢出，就得给卡片加 <code>overflow: hidden（Bootstrap.card默认没有） - 简短示例：
<div class="card overflow-hidden"><img src="..." class="rounded-3" alt="CSS如何为Bootstrap图片增加圆角效果_利用border-radius属性" ></div>
（v5 中.overflow-hidden是内置工具类） - 避免对
<picture></picture>或<figure></figure>直接设border-radius，它们不是替换元素，裁剪行为不可靠 - 优先用 Bootstrap 的
.rounded-*类（基于rem），它们会随根字体大小变化，天然响应式 - 如果必须手写，用
border-radius: 0.375rem（即 6px）比6px更可靠；v5 默认font-size: 16px，所以 1rem = 16px - 不要用
border-radius: 50%除非你确定图片是正方形——长图会变成胶囊形，且在 Safari 下偶有渲染抖动 - 如需精细控制，可结合媒体查询：
@media (max-width: 768px) { .my-img { border-radius: 4px; } }
响应式圆角在移动端失效？单位和媒体查询要配合
PC 上圆角正常，手机上看又变方了——常见于用 px 固定值写死 border-radius，而图片尺寸随屏幕缩小后，圆角半径没同步缩放。
性能 / 兼容性影响：用 rem 或 % 更安全，但 % 在图片上表现不稳定（基于容器宽高，而非自身）。
实操建议：
overflow、Bootstrap 类的叠加顺序、还有单位选择——这三处不动手试一遍，光看文档容易漏掉。
