为避免分页按钮圆角错位，应设ul.pagination font-size:0清除空白符，li内a恢复字号并统一border-radius（如4px/6px）；用li margin:0 2px配合:first-child/:last-child覆盖首尾间距；active状态需同步border-radius、背景色与边框；响应式下减小圆角、margin及padding值。
border-radius 怎么用才不破坏分页对齐
直接给 a 元素加 border-radius 很容易导致左右两端的按钮圆角“错位”——因为默认 display: inline 下，元素间存在不可见空格，加上圆角后视觉上会挤出缝隙或重叠。
解决办法是统一用 display: inline-block + 显式清除间隙：
- 给
ul.pagination设置font-size: 0，消除li间的空白符占位 - 再给
li a单独设font-size: 14px恢复文字大小 -
border-radius推荐设为4px或6px，太大（如20px）在小尺寸页码上会吞掉文字上下留白
margin 控制间距时常见的“粘连”问题
用 margin 给页码按钮加间隔，最容易踩的坑是：只给 a 加 margin-right，结果“下一页”按钮右边多出一截空白；或者用 margin: 0 4px，导致首尾按钮贴边难点击。
更稳妥的做法是只控制中间间隙：
- 给所有
li设margin: 0 2px - 再用
li:first-child, li:last-child覆盖掉首尾的margin，例如margin: 0 - 如果用了箭头图标（如
«/»），它们的margin应略小于数字项，避免视觉失衡
active 状态下 border-radius 与背景色的配合要点
当前页高亮时，background-color 和 border-radius 必须同步生效，否则会出现“圆角框里套方块色块”的割裂感。
关键检查点：
-
a.active的border-radius值必须和普通状态完全一致，不能写成border-radius: 50%这类动态值 - 避免用
box-shadow替代背景色——它不响应border-radius的裁剪，边缘会溢出 - 如果用了边框（
border），记得在a.active中显式重置border: none或保持同宽同色，否则圆角处边框粗细会突变
响应式断点下 border-radius 和 margin 的取舍
在移动端屏幕变窄时，border-radius 和 margin 都可能引发布局崩溃：圆角过大让按钮撑出容器，margin 过大会导致换行或溢出。
建议在 @media (max-width: 480px) 中做两件事：
- 把
border-radius从6px降到3px或干脆设为0 - 将
margin改为0 1px，并把padding从8px 16px缩到6px 12px - 绝对不要在媒体查询里改
display类型（比如切到flex），会破坏原有对齐逻辑
真正麻烦的不是怎么加圆角，而是当页码数量动态变化时，首尾按钮的圆角是否还该保留——这得靠 JS 动态加 class，纯 CSS 没法判断“这是不是第一个”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
