bootstrap 5用响应式rounded-*类控制圆角：小屏rounded-0直角，中屏及以上rounded-md圆角，顺序为rounded-0 rounded-md；5.3+支持rounded-md，5.2-用rounded；避免自定义css覆盖，优先使用官方工具类。
用 Bootstrap 5 的响应式工具类控制圆角
Bootstrap 5 默认按钮是带圆角的（border-radius: 0.375rem），但你可以用内置的响应式 rounded-* 工具类精准控制：大屏保留圆角，小屏强制直角。关键不是“覆盖默认”，而是“按断点主动设置”。
-
rounded-0表示完全无圆角（直角矩形），它在所有断点都生效，除非被更高优先级的类覆盖 -
rounded-md（或rounded）在md及以上断点生效，对应 ≥768px - 顺序很重要：把
rounded-0放前面，rounded-md放后面，这样小屏用rounded-0，中屏及以上覆盖为rounded-md
示例写法：
<button class="btn btn-primary rounded-0 rounded-md">提交</button>
注意：rounded-md 是 Bootstrap 5.3+ 引入的；若用 5.2 或更早版本，改用 rounded（等价于 rounded-md）或 rounded-lg，但需确认你的版本是否支持 —— 查 官方文档 borders 章节 中的 rounded-* 表格。
为什么不用自定义 CSS 覆盖 border-radius
直接写 style="border-radius: 0" 或加自定义类容易失效，因为 Bootstrap 的 .btn 基础样式里有 !important（仅限部分版本），且响应式类内部使用了媒体查询 + 更高特异性选择器。硬覆盖不仅冗余，还可能在升级 Bootstrap 后行为突变。
- 响应式工具类是 Bootstrap 官方推荐的、经过充分测试的方案
- 它们生成的 CSS 规则带媒体查询，如
@media (min-width: 768px) { .rounded-md { border-radius: 0.375rem; } } - 如果你用了 Sass 版本，还能通过
$border-radius变量统一调整，无需逐个改按钮
移动端 Safari 和旧 Android 浏览器的兼容性注意点
极少数老设备（如 iOS 12 或 Android 4.x）对 border-radius 渲染异常，比如圆角被裁切或显示为椭圆。这不是 Bootstrap 的问题，而是 WebKit 内核 bug。
- 确保父容器没设
overflow: hidden，否则圆角可能被意外裁掉 - 避免给按钮同时设
border和background-color以外的渐变/阴影，某些旧内核下会干扰圆角渲染 - 真要兼容 iOS 12–，可加一行
-webkit-appearance: none;到按钮样式（用自定义类，不影响其他按钮）
如果项目还在用 Bootstrap 4 怎么办
Bootstrap 4 没有 rounded-md 这类断点专属类，只有全局 rounded、rounded-0、rounded-circle 等。必须手动补媒体查询或用 visible-*-block 类组合 —— 但后者语义错乱，不推荐。
- 最稳妥做法：加一个自定义类，比如
btn-rounded-on-md，并在 CSS 中写：
.btn-rounded-on-md {
border-radius: 0;
}
@media (min-width: 768px) {
.btn-rounded-on-md {
border-radius: 0.25rem;
}
}
这个值（0.25rem）对应 BS4 的 $border-radius 默认值，别直接抄 BS5 的 0.375rem。
圆角切换看着简单，真正麻烦的是断点边界行为和旧环境渲染一致性 —— 别只测 Chrome 桌面版，至少拿 iOS Safari 和 Chrome Android 真机跑一遍 width: 767px 和 768px 两个临界值。
