bootstrap 5+ 按钮彻底去圆角应优先使用 rounded-0 工具类；btn-group 中需给整个组加 rounded-0 或额外 wrapper 覆盖；outline 按钮 focus 状态可能恢复圆角，可加 .btn.rounded-0:focus { border-radius: 0 !important; } 修复。
Bootstrap 按钮默认圆角怎么彻底去掉
Bootstrap 5+ 默认给所有 btn 类按钮加了 border-radius: 0.375rem，即使你没显式写 rounded 类也会有圆角。想完全直角，不能只靠重置 CSS，得优先用框架提供的工具类。
-
rounded-0是最直接的解法，它会把border-radius设为0，且比自定义样式优先级高（因在 Bootstrap CSS 中靠后声明） - 别用
rounded-none—— Bootstrap 里没有这个类，写了也没效果 - 如果按钮还带
btn-group或下拉菜单（dropdown-toggle），需额外处理子元素，因为btn-group会给首尾按钮单独加圆角
多个按钮组合时 rounded-0 失效怎么办
在 btn-group 里单独给某个按钮加 rounded-0 通常无效，因为 btn-group 的 CSS 规则（如 .btn-group > .btn:first-child）会强制覆盖。
- 给整个
btn-group加rounded-0：它会透传到内部所有按钮，包括首尾 - 或者改用
btn-group-sm+rounded-0组合，小尺寸下部分圆角逻辑会被跳过，但不推荐依赖尺寸做 hack - 真要精细控制（比如只要中间按钮直角），得额外加一层 wrapper 并用 CSS 覆盖：
.my-btn-group .btn:not(:first-child):not(:last-child) { border-radius: 0; }
和 btn-outline-* 一起用时圆角异常
某些主题或自定义 btn-outline-* 变体可能在 :focus 或 :active 状态下恢复圆角（尤其用了 box-shadow 的 focus 样式），导致鼠标移入后又“弹出”圆角。
- 检查 DevTools 中
:focus状态下的border-radius是否被重设 —— 常见于第三方主题或旧版 Bootstrap 插件 - 补一句
.btn.rounded-0:focus { border-radius: 0 !important; }即可（仅限必须时，避免全局滥用!important） - 如果你用的是 Bootstrap 5.3+，官方已修复大部分 outline 按钮 focus 圆角回退问题，升级能省事
自定义按钮组件中如何安全继承 rounded-0
用 Vue/React 封装 BaseButton 时，若父组件传了 rounded="false"，别直接映射成 rounded-0 类——万一用户同时传了 rounded="lg"，两个类会冲突。
- 推荐用 class 对象语法动态控制：
{ 'rounded-0': !rounded, 'rounded': rounded === true, 'rounded-lg': rounded === 'lg' } - 更稳妥的做法是只暴露一个
roundedprop，接受boolean | 'sm' | 'lg' | '0'，然后映射为对应类名，'0'显式对应rounded-0 - 别忘了在组件文档里注明：传
false不等于rounded-0，它只是关掉默认圆角，不保证 CSS 层面为 0（比如父容器有overflow: hidden仍可能裁剪）
实际项目里最容易漏的是 btn-group 场景和 focus 状态，这两个地方一不留神就让直角变回圆角。
