真正生效的圆角必须作用于 .page-link 元素并覆盖所有状态（:hover、:focus、.active > .page-link），而非 .pagination 或 .page-item；整体外轮廓圆角需额外包裹容器并设置 overflow: hidden。
直接改 .pagination 容器的 border-radius 没用
因为 .pagination 只是个 display: flex 的容器，不渲染边框、也不控制子项圆角。真正起作用的是每个分页链接——.page-link。你给 .pagination 加 border-radius: 8px，浏览器计算后不会传递给子元素，视觉上完全没变化。
常见错误现象：写了一堆 .pagination { border-radius: 6px; }，刷新页面一看，按钮还是直角。
- 检查开发者工具中
.page-link的「Computed」面板，确认border-radius值是否真被应用 - 避免只改
.page-item：它默认是display: inline-flex，设border-radius会因无边框+无溢出裁剪而失效 - 不要用
.rounded工具类套在.page-item上——它只作用于自身，不透传给内部.page-link
正确改法：覆盖 .page-link 的 border-radius 规则链
.page-link 在 Bootstrap 5 中有多个状态样式：:hover、:focus、.active > .page-link，它们各自定义了 border-radius。只写一条 .page-link { border-radius: 0.375rem; } 很可能被其他规则覆盖，导致悬停或激活时变直角。
- 必须一并覆盖：
.page-link, .page-link:focus, .page-link:hover, .page-item.active .page-link - 如果项目用了 CSS 变量（Bootstrap 5.3+），可全局统一：
:root { --bs-pagination-border-radius: 0.375rem; }，但需确认 CDN 或构建版本支持该变量 - 权重不够时，加前缀提升选择器强度，例如：
nav .pagination .page-link，比单纯.page-link更高
移动端竖排分页时圆角“消失”的原因
当屏幕宽度 ≤ 576px（sm 断点），Bootstrap 把 .pagination 设为 flex-direction: column，每个 .page-link 垂直堆叠。此时若 line-height 或 padding 过小，上下相邻的 .page-link 会视觉遮挡彼此的圆角——尤其顶部和底部按钮的上/下弧度容易被“切掉”。
- 检查
.page-link在小屏下的height和padding是否足够撑开圆角区域 - 必要时用媒体查询单独加固：
@media (max-width: 576px) { .page-link { border-radius: 0.5rem; } } - 如果用了
overflow: hidden包裹整个分页条（比如加了背景色），要确保外层容器也设border-radius并overflow: hidden，否则圆角仍会溢出
想让整个分页块有外轮廓圆角？得额外包一层
如果你希望分页组件整体像卡片一样带一个包裹性圆角（比如浅色背景+阴影），不能只靠 .page-link 单个按钮的圆角——它们之间有 margin 间隙，拼不出连续外边框。
- HTML 层级要加 wrapper：
<nav class="pagination-wrapper"><ul class="pagination">...</ul></nav> - CSS 写：
.pagination-wrapper { border-radius: 0.375rem; overflow: hidden; background-color: #f8f9fa; } - 注意：这个 wrapper 的圆角和
.page-link的圆角是两套逻辑，需分别控制；否则可能出现“内圆角小、外圆角大”的错位感
.page-link 上，且必须覆盖所有交互态；所谓“整体圆角”只是视觉包装，需要显式容器 + 溢出裁剪。别指望一个 class 解决全部，更别漏掉 :focus 和 .active 的规则。
