bootstrap按钮组圆角需作用于内部每个.btn而非.btn-group；水平组用rounded-start/rounded-end，垂直组用border-top/bottom-*radius；rounded-pill需配合text-nowrap和min-width防文字溢出。
Bootstrap按钮组默认不继承border-radius，直接加无效
Bootstrap 5 的 .btn-group 是 flex 容器，内部按钮默认去除了左右圆角（border-radius: 0），目的是让按钮紧贴拼接。你给 .btn-group 自己设 border-radius，对子元素 .btn 没影响——圆角还是不会出现。
实操建议：
- 必须作用于内部每个
.btn，而不是.btn-group - 优先用 Bootstrap 自带的工具类：
rounded-start、rounded-end、rounded-pill，比手写 CSS 更可靠 - 如果用自定义 CSS，记得加
!important或提高选择器权重，否则会被 Bootstrap 的.btn-group > .btn规则覆盖
btn-group 中第一个和最后一个按钮的圆角要分别处理
按钮组是线性排列，只有首尾需要圆角，中间按钮必须保持直角拼接，否则视觉断裂。Bootstrap 本身通过 .btn-group > .btn:not(:first-child) 和 :not(:last-child) 主动重置了 border-radius。
实操建议：
- 用
.btn-group > .btn:first-child设border-start-start-radius和border-end-start-radius - 用
.btn-group > .btn:last-child设border-start-end-radius和border-end-end-radius - 避免只写
border-radius: 0.375rem—— 这会同时影响上下左右，在垂直按钮组（.btn-group-vertical）里出错
垂直按钮组（.btn-group-vertical）的圆角方向容易反
水平按钮组圆角在左右，垂直按钮组应该在上下——但很多人复制水平写法，继续设 border-start-start-radius，结果圆角出现在左上角，不符合预期。
实操建议：
- 垂直组用
border-top-start-radius+border-top-end-radius控制顶部按钮 - 用
border-bottom-start-radius+border-bottom-end-radius控制底部按钮 - Bootstrap 5.3+ 支持逻辑属性，但旧版本或 IE 不支持，稳妥起见可回退到
border-top-left-radius等物理属性
用 rounded-pill 时要注意按钮宽度和文字溢出
rounded-pill 本质是 border-radius: 50rem，会让按钮变成胶囊形。但如果按钮内容多、容器窄，文字可能被截断或换行错位。
实操建议：
- 配合
text-nowrap防止文字折行 - 给按钮设
min-width（如min-width: 6rem），避免过窄挤压圆角 - 在响应式场景下，
rounded-pill在小屏上可能显得突兀，建议用媒体查询降级为rounded
btn-group-sm/btn-group-lg 后半径没同步缩放——这些地方的 border-radius 值得单独算，不是套个类就完事。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
