bootstrap 5按钮响应式圆角需用rounded-0 rounded-lg组合类，rounded-0必须前置清除所有断点圆角，rounded-lg仅在lg及以上生效；边框粗细无原生响应式类，须手写媒体查询并同时设置border-width、style和color。
Bootstrap 5 中按钮圆角如何按断点响应式切换
直接用 rounded-0 rounded-lg 组合类，顺序不能颠倒。Bootstrap 的响应式类只在对应断点及以上生效，rounded-0 先清除所有尺寸的圆角，rounded-lg 再仅在 lg（≥992px）及以上恢复圆角，小屏（xs–md）保持直角。
常见错误是写成 rounded-lg rounded-0 或混用 rounded-md——后者会在 md 断点起效，破坏“小屏直角”目标。
-
rounded-0必须放在最前，确保从最小屏幕开始就是直角 -
rounded-lg要紧随其后，它不会影响md及以下，只对lg、xl、xxl生效 - 不要加
!important或自定义媒体查询——原生类已内置断点逻辑，语义清晰且无副作用 - 按钮所有状态（
:hover、:focus、.disabled）都会继承该圆角，无需额外处理
按钮边框粗细无法用响应式类直接控制
Bootstrap 5 没有 border-lg-2 这类断点前缀边框工具类，所有 .border-* 类都是静态的，不响应屏幕尺寸。想实现“小屏细边、大屏粗边”，必须手写 CSS 媒体查询，并注意三要素同时设置：边框宽度、样式、颜色。
直接写 class="btn btn-primary border-3" 无效，因为 .btn 自带高权重的 border-width: 1px 规则，.border-3 无法覆盖。
- 先确保按钮已有基础边框：
class="btn btn-primary border"（否则border-width不生效） - 再叠加自定义类，例如
btn-responsive-border，并在 CSS 中用@media (min-width: 992px)控制border-width - 必须同时声明
border-style: solid和border-color，否则浏览器会忽略border-width - 避免用
!important；改用更具体的选择器，如.btn.btn-primary.btn-responsive-border
圆角 + 边框粗细组合时容易忽略的冲突点
当同时设置响应式圆角和响应式边框时，最常踩的坑是按钮尺寸类（.btn-sm / .btn-lg）悄悄改了边框宽度：它们分别设为 0.5px 和 2px，会与你自定义的 border-width 叠加计算，导致实际粗细偏离预期。
例如 .btn-sm.btn-responsive-border 在 lg 下可能渲染出 2px（来自 .btn-sm）而非你期望的 1.5px（来自自定义媒体查询）。
- 若需精确控制，建议放弃
.btn-sm/.btn-lg，改用 padding + font-size 手动调尺寸 - 圆角类（
rounded-0 rounded-lg）和边框类（border）可共存，无冲突，但自定义边框 CSS 必须加载在 Bootstrap CSS 之后 - 不要给同一按钮同时加
rounded-pill和响应式圆角类——rounded-pill的border-radius: 50rem会覆盖所有其他圆角设置
垂直按钮组的圆角方向别写反
水平按钮组（.btn-group）首尾按钮圆角在左右，垂直按钮组（.btn-group-vertical）则应在上下。很多人复制水平写法，继续用 border-start-start-radius，结果圆角出现在左上角，视觉错位。
正确做法是：垂直组用 border-top-left-radius + border-top-right-radius 控制顶部，border-bottom-left-radius + border-bottom-right-radius 控制底部；或统一用 border-top-radius / border-bottom-radius（需确认浏览器支持）。
- 不要依赖
:first-child/:last-child处理动态增删按钮的场景——用.btn-group-vertical > .btn:first-of-type更稳妥 - 如果用了
rounded-0 rounded-lg，它对垂直组同样有效，但仅作用于单个按钮四角，仍需额外修复首尾外侧圆角方向 - 所有自定义圆角 CSS 都要加
!important，因为 Bootstrap 的.btn-group-vertical > .btn规则显式设了border-radius: 0
