直接改 .btn 的 border-radius 没反应，因 Bootstrap 5 通过 --bs-btn-border-radius 变量控制圆角，硬写 CSS 易被 focus 或主题逻辑覆盖；需在 :root 中统一设置变量，并同步处理渐变背景、状态样式、高度与 padding 匹配。
直接改 .btn 的 border-radius 为什么没反应
因为 Bootstrap 5 按钮的圆角不是硬编码值，而是通过 CSS 自定义属性 --bs-btn-border-radius 注入的。你写 .btn { border-radius: 12px; } 很可能被 .btn-primary:focus 或主题切换逻辑覆盖。DevTools 里如果看到 computed 的 border-radius 是具体像素（比如 0.375rem），说明变量链已断；如果显示 var(--bs-btn-border-radius)，才代表变量路径通畅。
必须同时设置渐变背景和圆角变量
Bootstrap 5 默认按钮只用纯色 background-color，不设 background-image，所以单加渐变会破坏 hover / active 状态。圆角和渐变必须同步控制，且不能靠行内 style —— 它无法响应状态变化。
- 优先在
:root中统一注入：:root { --bs-btn-border-radius: 12px; --bs-btn-border-radius-sm: 8px; --bs-btn-border-radius-lg: 16px; } - 渐变类需显式重写所有状态：
.btn-gradient { background: linear-gradient(135deg, #4a6fa5, #6b8dcc); background-color: #4a6fa5; /* 降级色 */ } .btn-gradient:hover { background: linear-gradient(135deg, #3a5a80, #5a7ab9); background-color: #3a5a80; } .btn-gradient:active { background: linear-gradient(135deg, #2a4a6d, #4a6fa5); background-color: #2a4a6d; } - 别漏掉
:disabled和深色模式兼容：加color: white;并测试暗色下文字是否可读
按钮高度不够时，大圆角会“撑不开”
默认 .btn 高度约 2.5rem（40px），即使设了 --bs-btn-border-radius: 12px，左右弧度仍显扁平，不像胶囊。必须配合足够高度才能视觉成立。
- 推荐组合：
class="btn btn-gradient btn-lg"→ 高度升至约3.5rem（56px），此时12px圆角才自然饱满 - 若手动设
height: 48px，则--bs-btn-border-radius应设为24px（即高度一半），否则左右圆角会溢出或不闭合 - 注意
btn-lg自带上下 padding，若重设 height，需同步调padding，否则文字垂直偏移
容易被忽略的三个细节
真机测试时，iOS Safari 对超大 border-radius（如 50rem）有渲染上限，可能截断为最大支持值；btn-group 内部按钮默认左右圆角归零；btn-close 完全不走 --bs-btn-border-radius 变量，它用的是独立的 --bs-btn-close-border-radius。
立即学习“前端免费学习笔记（深入）”；
这些点不提前处理，上线后会在特定设备或组合场景下突然失效——不是代码写错了，是 Bootstrap 内部规则链比表面看到的更细、更碎。
