Bootstrap页码圆角需设.page-link的border-radius，而非.pagination；推荐用CSS变量--bs-pagination-border-radius或Sass变量$pagination-border-radius统一控制，并注意响应式与选择器权重。
Bootstrap 页码圆角样式靠 .pagination 的 border-radius
bootstrap 默认的页码组件（.pagination）本身不带圆角，但它的每个 <li> 子项里是 <a> 或 <span>，真正控制圆角的是这些链接的 border-radius。直接改 .pagination 容器的 border-radius 没用——它只是个 flex 容器，不渲染边框。
实操建议：
- 优先给
.page-link设置border-radius: 0.25rem（Bootstrap 默认的圆角值），这样和按钮、输入框风格统一 - 如果想让整个页码块整体有外轮廓圆角（比如加背景色后需要视觉包裹），得额外包一层
<nav class="pagination-wrapper">，再给 wrapper 加border-radius和overflow: hidden - 避免只改
.page-item：它默认是display: inline-flex，左右间距由margin控制，设border-radius会失效
覆盖 Bootstrap 默认样式时，选择器权重必须足够
Bootstrap 5 的 .page-link 带有 :focus、:hover、.active > .page-link 等多层规则，直接写 .page-link { border-radius: 4px; } 很可能被覆盖。
常见错误现象：border-radius 在非激活态生效，点一下就变直角。
实操建议：
- 把关键规则写全：
.page-link, .page-link:focus, .page-link:hover, .page-item.active .page-link - 或者用
!important（不推荐），更稳妥的是在自定义 CSS 文件中放在 Bootstrap 引入之后，并用更高权重选择器，比如nav .pagination .page-link - 注意 Bootstrap 5.3+ 引入了
--bs-pagination-border-radiusCSS 变量，可直接覆盖：:root { --bs-pagination-border-radius: 0.375rem; }，但仅影响新版本且需确认是否启用 CSS 变量支持
移动端小屏下圆角容易被误判为“没生效”
Bootstrap 页码在 sm 断点以下会变成垂直堆叠（flex-direction: column），此时每个 .page-link 的上下圆角可能被相邻元素遮挡，或因行高/内边距压缩导致视觉上“圆不起来”。
使用场景：分页条在手机上显示为竖排时，用户仍期望单个按钮保持圆角。
实操建议：
- 检查
.page-link的padding是否过小（默认0.375rem 0.75rem），小屏下可微调，比如@media (max-width: 576px) { .page-link { padding: 0.25rem 0.5rem; } } - 避免用
border-radius: 50%——那会让小尺寸按钮变椭圆甚至圆形，不符合“圆角矩形”的预期 - 真机调试时用浏览器的“设备模拟器”看渲染结果，不要只信桌面缩放
用 Sass 自定义时别漏掉 $pagination-border-radius
如果你项目用的是 Bootstrap Sass 源码（而非 CDN CSS），最干净的方式是在引入前覆盖变量，而不是后期 CSS 覆盖。
性能 / 兼容性影响：变量方式编译一次即生效，无运行时开销，且能同步作用于所有依赖该变量的组件（如 .btn 若共享变量则也会变）。
实操建议：
- 在
@import "bootstrap/scss/functions";后立即定义：$pagination-border-radius: 0.375rem; - 确保没漏掉
$pagination-border-radius-lg和$pagination-border-radius-sm——它们分别用于.pagination-lg和.pagination-sm变体 - 如果用了 Bootstrap 官方主题色（如
dark），记得检查dark.scss是否重置了该变量
