最稳妥方案是用 border-radius 直接设置分页按钮圆角：首末项单独设单侧圆角，中间项设为0，配合 gap 避免割裂；焦点状态用 :focus-visible + box-shadow 替代 outline；ie11 仅支持简写 border-radius；推荐 css 变量统一控制圆角大小。
用 border-radius 直接给分页按钮加圆角最稳妥
圆角分页器本质是让 <button></button> 或 <a></a> 元素的边框变圆，不是靠图片或 SVG——现代浏览器都支持 border-radius，它就是最直接、最可控的方式。
常见错误是只给第一个和最后一个元素加圆角，却忘了中间项之间不能有缝隙，否则左右圆角会重叠或漏白：
- 所有分页项统一设
border-radius: 4px安全但不够“典型”； - 要模仿主流 UI（如 Bootstrap），得单独处理首项
border-top-left-radius和border-bottom-left-radius，末项对称设右角； - 中间项必须设
border-radius: 0，否则相邻按钮圆角会视觉冲突； - 如果用了
display: inline-flex或flex布局，记得给容器加gap: 2px替代 margin，避免圆角被间隙割裂。
用 outline: none 和 :focus-visible 避免圆角被焦点框破坏
点击或 Tab 切换时，浏览器默认加的 outline 是直角矩形，会盖住你精心调好的圆角，尤其在 Chrome/Firefox 中特别明显。
别直接全局关 outline: none——这会损害可访问性。正确做法是：
- 保留
outline，但用outline-offset: -2px往内缩，让它贴合圆角边缘； - 或者改用
box-shadow: 0 0 0 2px #007bff模拟焦点环，它天然遵循border-radius； - 更推荐组合写法：
:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(0,123,255,0.25); }，既保圆角又保键盘可用性。
IE11 及更老浏览器不支持 border-radius 的降级方案
如果你的项目还必须兼容 IE11（比如政企内网系统），border-radius 仍可用，但要注意两个坑：
- IE11 支持
border-radius，但不支持分别设置单侧圆角（如border-top-left-radius），只能用简写border-radius: 4px 4px 0 0； - 如果用了
filter: drop-shadow()做阴影，IE11 会完全失效，得 fallback 成box-shadow； - 不要依赖
clip-path做圆角——IE 不支持，且在 Safari 旧版中渲染不稳定。
用 CSS 变量动态控制圆角大小，方便主题切换
当分页器要适配不同设计规范（比如小屏用 2px 圆角，桌面端用 6px），硬编码 border-radius: 6px 会很难维护。
把圆角抽成变量，能一键调整整套分页样式：
:root {
--pager-radius: 6px;
}
.pager-item {
border-radius: var(--pager-radius);
}
.pager-item:first-child {
border-top-left-radius: var(--pager-radius);
border-bottom-left-radius: var(--pager-radius);
}
.pager-item:last-child {
border-top-right-radius: var(--pager-radius);
border-bottom-right-radius: var(--pager-radius);
}
后续只需改 --pager-radius 值，所有分页项圆角同步响应。注意：CSS 变量无法在伪类选择器里被覆盖（比如 :first-child:is(.active) 中再设变量），如有高亮态特殊圆角，得单独写规则。
圆角看着简单，但真正上线时最容易被忽略的是焦点状态与多浏览器圆角渲染差异——尤其是 flex 布局下 gap 和 border-radius 的配合，稍不注意就会在 Safari 或 Edge 中出现半像素错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
