用纯css实现分页按钮需：.pagination设flex布局；li统一边框但首项去左框、末项去右框；圆角仅首项左端、末项右端；active和disabled状态须显式定义背景、文字色、透明度及pointer-events；小屏用flex-wrap或切block布局并重置圆角；padding需配合line-height确保垂直居中，移动端加min-width。
怎么用纯CSS实现分页按钮的圆角+边框效果
直接给 .pagination 容器加 display: flex，每个页码项用 li 包裹、设为 inline-block 或 flex 子项，再统一控制边框和圆角。关键不是“怎么画”，而是“怎么让相邻按钮的边框不重复、圆角不打架”。
- 必须给所有
li设置border: 1px solid #ccc，但左右边框会重叠——所以得用border-left: none（除第一个） +border-right: none（除最后一个）来消重 - 圆角只加在首项左端、末项右端：
first-child border-radius: 4px 0 0 4px，last-child border-radius: 0 4px 4px 0 - 别给
a标签单独设border-radius—— 它会被父li的盒模型裁剪，且响应区域变小
active状态和禁用态的视觉区分怎么做才不翻车
很多人用 :hover 加背景色，结果点中后没反馈，用户根本不知道当前页。必须显式定义 .active a 和 .disabled a 的样式，且不能只靠颜色——色弱用户可能分不清。
-
.active a要同时改背景、文字色、移除边框（或换为同色边框），例如：background: #007bff; color: white; border-color: #007bff -
.disabled a用opacity: 0.5+cursor: not-allowed，别只靠灰度——有些屏幕下 0.5 透明度仍可点击，得加pointer-events: none - 避免用
!important强行覆盖，容易和 JS 动态加类冲突；优先用更具体的 CSS 选择器，比如.pagination .active a
响应式断点下分页列表换行错位怎么办
小屏一排塞不下，flex-wrap: wrap 是最省事的解法，但默认换行后每行首尾的圆角和边框会乱——第二行第一个按钮又出现左圆角，视觉上像新一组。
- 用媒体查询把小屏下的布局切回
block：每个li设display: block; margin: 2px 0，再统一设border-radius: 4px - 或者保持
flex，但用:nth-child(n)重置中间项的圆角：li:not(:first-child):not(:last-child) { border-radius: 0; }，并在小屏下关闭该规则 - 千万别用
float+clear—— 现代浏览器里它和 flex 共存时高度计算异常，尤其配合line-height时页码会偏移
为什么 padding 和 height 要配着调，而不是只调一个
分页按钮看起来“挤”或“空”，90% 是因为只改了 padding 却没同步调 line-height 或 height，导致文字上下不对齐、点击热区偏移。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
padding: 6px 12px+line-height: 1.5（而非固定height），这样文字自动垂直居中，且支持多语言字体高度差异 - 如果强制设
height: 32px，必须同时设line-height: 32px，否则 Chrome 下文字会下沉 1px - 移动端要额外加
min-width: 36px—— 苹果系统小屏下12px字体 + 默认 padding 可能让按钮窄于点击阈值
圆角和边框只是表象，真正卡住人的永远是盒模型叠加、状态覆盖顺序、以及不同设备对 line-height 和 padding 的渲染偏差。调样式前先打开开发者工具看 computed 值，比猜快得多。
