Bootstrap 5 可用 rounded 和 border 类快速添加圆角与边框：rounded 基础圆角，rounded-circle 需正方形图片；border 默认灰色细边框，颜色可用 border-primary 等，加粗或虚线需自定义 CSS；响应式圆角需断点类组合或媒体查询。
用 Bootstrap 5 的 rounded 和 border 类直接加圆角和边框
bootstrap 5 内置了足够细粒度的工具类，不用写一行 css 就能给 <img> 加圆角和边框。关键不是“能不能”，而是选对类名、避开默认干扰。
-
rounded是基础圆角（约 0.25rem），rounded-0完全无圆角，rounded-circle是正圆（适合头像） -
border加默认灰色边框（1px solid #dee2e6），border-primary等可换颜色，border-0移除边框 - 注意：如果图片是响应式（用了
img-fluid），这些类依然生效；但若父容器有overflow: hidden，超大圆角可能被裁切 - 别在
<img>上同时用rounded-circle和宽高不等的图片——会拉伸变形，先确保图片本身是正方形，或用object-fit: cover配合容器控制
为什么加了 rounded 没效果？常见干扰源
最常踩的坑不是类名写错，而是被其他样式覆盖或结构限制。
- 检查是否误加了
img-thumbnail：它自带border和固定padding，会和rounded叠加出奇怪的视觉厚度 - 确认没在父元素上设
overflow: hidden且子元素margin为负——圆角会被裁掉，看着像没生效 - 如果你用的是 Bootstrap 4，
rounded-circle要求图片宽高相等，否则椭圆；Bootstrap 5 同样适用，别指望它自动裁图 - 自定义 CSS 中写了
border-radius: 0 !important或重置了img的display（比如设成block却忘了处理垂直对齐），也可能压制工具类
border 颜色和粗细怎么调？原生类够用吗
Bootstrap 5 的 border-{color}（如 border-danger）只改颜色，粗细固定为 1px。真要加粗或改虚线，得自己补 CSS。
- 颜色可用系统色：
border-primary、border-success、border-dark等，对应主题配色变量 - 粗细不能单靠工具类提升——
border-2这类不存在，必须写style="border-width: 2px"或加自定义 class - 边框样式（虚线/点线）也不在默认工具类里：
border-dashed是 Bootstrap 5.3+ 新增的，旧版本需手动加border-dashed规则或内联style="border-style: dashed" - 想让边框紧贴图片边缘？默认
border没 padding，但如果有外边距（mb-2等）或父容器line-height影响行内元素基线，图片下方可能出现空白缝——加d-block或align-text-bottom更稳
响应式圆角怎么实现？比如小屏圆角小、大屏圆角大
Bootstrap 原生不提供响应式圆角工具类（比如 rounded-md-down 这种），得自己组合断点类或写媒体查询。
- 简单方案：用断点前缀类叠加，例如
rounded rounded-md-0—— 在md及以上屏幕取消圆角；反过来rounded-0 rounded-md就是仅在md+生效 - 更灵活的做法是自定义 CSS，比如：
@include media-breakpoint-up(md) { .img-rounded-lg-md { border-radius: 1rem; } }然后在图片上加rounded-0 img-rounded-lg-md - 注意：所有响应式断点类（
rounded-sm、rounded-md）都是“最小断点生效”，不是“仅在此断点生效”，别指望rounded-sm在小屏圆角小、大屏自动变大——它只在sm及以上起作用，且值固定
rounded-circle 和非正方形图片共存时，不配 object-fit 或容器尺寸控制，结果基本不可控。
