bootstrap 4分页边框应设在.page-link上，而非.page-item或.pagination；需同步覆盖默认、:hover、.active、:focus及.disabled状态的border-width和border-color，并注意简写会重置border-radius，小屏下须配合padding调整避免文字挤压。
直接改 .page-link 的 border，别碰 .page-item 或 .pagination
Bootstrap 4 的分页边框样式实际由 .page-link 元素承载，.page-item 是 display: inline-flex 容器，不渲染边框；.pagination 更只是 flex 容器，设 border 会套在整个分页条外圈，不是你想要的“每个按钮边框”。常见错误是写 .page-item { border: 1px solid #ddd; }，结果什么也没变——因为边框被子元素 .page-link 的背景和 padding 盖住了。
实操建议：
- 所有边框控制都落在
.page-link上：包括默认、:hover、.page-item.active .page-link、:focus - 必须同步覆盖
border-radius，否则圆角和直角边框混用时视觉割裂（比如.page-link有border-radius: 0.25rem，但你只改了border，没重设圆角，hover 时可能突然变直角） - 如果用了
.pagination-lg或.pagination-sm，记得它们自带border-radius值，你的自定义border要匹配对应尺寸的圆角，否则大小屏下表现不一致
border-color 和 border-width 分开调，别用 border 简写覆盖全部
Bootstrap 4 默认用 border: 1px solid #dee2e6;，但直接写 .page-link { border: 2px solid #007bff; } 会把 border-radius 也重置为 0（CSS 简写特性），导致按钮四角变尖。这不是 bug，是简写规则本身行为。
安全写法是拆开声明：
-
.page-link { border-width: 2px; border-color: #007bff; }—— 保留原有border-style和border-radius - 若要统一改所有状态，显式写出：
.page-link, .page-link:hover, .page-item.active .page-link { border-width: 2px; } - 禁用项（
.page-item.disabled .page-link）的边框常被忽略，它默认是color: #6c757d+border-color: #dee2e6，对比度低，建议单独加灰阶边框：.page-item.disabled .page-link { border-color: #ced4da; }
响应式边框适配：小屏下避免边框挤压文字
在 max-width: 576px（Bootstrap 4 的 sm 断点）下，.page-link 的 padding 会缩小（默认从 0.5rem 0.75rem 缩到 0.375rem 0.75rem），此时如果还维持 2px 边框，左右内边距会被视觉压缩，文字贴边甚至截断。
应对方式：
- 媒体查询中微调边框宽度：
@media (max-width: 576px) { .page-link { border-width: 1px; } } - 或更稳妥地，用
calc()动态补偿：.page-link { padding: 0.375rem calc(0.75rem - 1px); border-width: 1px; }（减去边框占用的像素） - 切忌在小屏下只加
border-width不调padding——这是移动端分页按钮文字偏移、点击错位的高频原因
无障碍与 focus 边框不能省略
键盘用户靠 :focus 边框定位当前焦点。Bootstrap 4 默认用 box-shadow 模拟 focus 轮廓（box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25)），但如果你重写了 border 却没处理 :focus，会导致键盘导航时完全看不到焦点位置。
必须补全：
.page-link:focus { outline: none; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); }- 如果想用纯边框替代阴影，至少保证足够对比度：
.page-link:focus { outline: none; border: 2px solid #007bff; }，并测试是否遮挡文字或破坏圆角 - 别依赖
outline: auto——不同浏览器渲染差异大，iOS Safari 下可能根本不可见
边框微调最易被忽略的点是：它从来不是孤立属性。border-width 会吃掉 padding 视觉空间，border-color 影响可访问性对比度，而 :focus 边框一旦缺失，就等于关掉了键盘用户的门。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
