直接给.btn-group加border-radius无效，因为CSS圆角不继承且Bootstrap通过子元素选择器重置了按钮圆角；必须作用于每个.btn元素本身，水平组用.rounded-start/.rounded-end，垂直组用.rounded-top/.rounded-bottom。
为什么直接给 .btn-group 加 border-radius 没用
因为 .btn-group 是 flex 容器，bootstrap 通过 .btn-group > .btn:not(:first-child):not(:last-child) 主动把中间按钮的圆角设为 0，首尾按钮的左右圆角也被分别重置。你给容器加 border-radius，根本不会透传到子元素上——css 的 border-radius 不继承，也不影响子元素盒模型边界。
常见错误现象：写 .btn-group { border-radius: 0.375rem; } 后完全没变化；或者只看到容器外框有圆角，但按钮拼接处还是直角、有视觉断裂。
- 必须作用于每个
.btn元素本身，而不是父容器 - 水平按钮组只应操作左右两侧（
border-start-start-radius/border-end-end-radius），垂直组则要改上下（border-start-start-radius→ 实际是左上，错！该用border-start-start-radius和border-end-end-radius在垂直方向对应顶部和底部） - 若用自定义 CSS，得提高选择器权重，比如
.btn-group > .btn:first-child而非简单.btn:first-child
用 Bootstrap 内置工具类统一控制首尾圆角
Bootstrap 5 提供了语义化类，比手写 CSS 更稳定、兼容性更好，且自动适配水平/垂直方向。
- 水平按钮组：
.rounded-start加在第一个按钮，.rounded-end加在最后一个按钮 - 垂直按钮组：
.rounded-top加在第一个，.rounded-bottom加在最后一个 - 想两端都用“胶囊形”？用
.rounded-pill，但它要求按钮高度足够，否则上下圆角会裁剪；同时必须搭配text-nowrap和最小宽度（如min-width: 6rem）防文字溢出或塌陷 - 避免混用：不要给同一个按钮同时加
.rounded-start和.rounded-pill，后者声明优先级更高，前者会被覆盖
自定义 CSS 覆盖时的关键细节
当工具类不够用（比如要精确到 4px 或响应式微调），就得写 CSS。但容易踩坑的地方很多。
- 水平组首尾规则示例：
.btn-group > .btn:first-child { border-start-start-radius: 4px; border-end-start-radius: 4px; } .btn-group > .btn:last-child { border-start-end-radius: 4px; border-end-end-radius: 4px; } - 垂直组要把
start/end换成top/bottom：border-top-left-radius和border-top-right-radius对应顶部，border-bottom-left-radius和border-bottom-right-radius对应底部 - 别只写
border-radius: 4px—— 它会同时作用于四个角，在垂直组里会让左右边也变圆，破坏对齐 - 如果项目用了深色模式或动态主题，建议用 CSS 变量：
border-start-start-radius: var(--bs-border-radius, 0.375rem);，方便后续统一调整
全局统一圆角的陷阱与替代方案
有人想“一劳永逸”，试图改 $border-radius 变量来影响按钮组——这行不通。因为按钮组的圆角逻辑不走这个变量，它硬编码在 _button-groups.scss 里，靠显式重置实现拼接效果。
-
.btn-group > .btn的圆角不是由$border-radius驱动，而是由独立规则控制，改变量对它零影响 - 全局 CSS 覆盖（如
.btn-group > .btn { border-radius: 4px !important; }）看似简单，但会破坏中间按钮的直角拼接，导致按钮之间出现缝隙或阴影错位 - 真正安全的“统一”，是封装一个自定义类，比如
.btn-group-rounded，内部只精准设置首尾，并保持中间按钮的border-radius: 0 - 最易被忽略的一点：垂直按钮组的
.btn-group-vertical类名必须存在，否则.btn-group > .btn的默认样式仍按水平逻辑处理，圆角方向必然出错
