layui分页按钮圆角必须通过css覆盖实现，核心是精确类名加!important：.layui-laypage a设基础圆角，.layui-laypage-curr及内部.em同步设置防割裂，首尾单侧圆角单独声明，中间项设0防重叠，并用:focus-visible+box-shadow保可访问性。
直接改 .layui-laypage a 和 .layui-laypage-curr 的 border-radius
圆角不是靠 theme 或 layout 参数控制的，Layui 分页按钮本质就是 <a></a> 标签，加圆角只有一条路：CSS 覆盖。必须用精确类名 + !important，否则会被内联样式压掉。
-
.layui-laypage a控制所有页码按钮（含上一页、下一页），设border-radius: 4px !important是基础操作 -
.layui-laypage .layui-laypage-curr是当前页容器，它里面还套了一层.layui-laypage-em，两个都要设圆角，否则视觉割裂 - 首尾按钮若需单侧圆角（如左上/左下、右上/右下），得单独写：
.layui-laypage .layui-laypage-first { border-top-left-radius: 6px !important; border-bottom-left-radius: 6px !important; } - 中间页码按钮必须设
border-radius: 0 !important，否则相邻按钮的圆角会重叠或留白
为什么加了 border-radius 却看起来没圆？
常见原因不是代码写错，而是 DOM 渲染时机或选择器权重问题。
- Layui 的分页 DOM 是 JS 动态插入的，你的 CSS 必须在
layui.all.js加载之后生效；如果写在里且没延迟，大概率被忽略 - 用了 iframe 或异步加载表格时，
table.render()可能多次触发，导致分页被重绘，你写的样式被清空——解决办法是在done回调里再注入一次 style 标签 - 如果你用了 scoped CSS（比如 Vue 单文件组件），得用
:deep(.layui-laypage a)穿透，普通.layui-laypage a在 scoped 下根本匹配不到 - 老版本 Layui（2.5 及之前）中，
.layui-layer容器默认有overflow: hidden，如果只给内容设大圆角（如12px），但没同步给外层容器设border-radius，内容会被裁掉一角，看起来像“圆角失效”
移动端圆角要微调吗？
要。Layui 默认没做响应式圆角适配，小屏下按钮变窄，固定 border-radius: 6px 可能显得太突兀。
- 建议用媒体查询降级：
@media (max-width: 768px) { .layui-laypage a { border-radius: 3px !important; padding: 0 8px !important; } } - 别用
border-radius: 50%，按钮宽高不等时会拉成椭圆，尤其在 iOS Safari 中明显 - 如果项目支持 CSS 变量，把圆角抽成
--page-radius: 4px，后续换主题只需改一处
焦点状态下圆角被 outline 盖住怎么办？
浏览器默认 focus outline 是直角矩形，会破坏圆角视觉。不能直接 outline: none，会影响可访问性。
- 推荐组合写法：
.layui-laypage a:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(0,123,255,0.25) !important; }，阴影自动贴合圆角 - 如果用的是旧版 Layui（2.1～2.5），
.layui-laypage a没绑定focus-visible，得退回到:focus，但要注意键盘用户 tab 流程是否仍清晰 - 避免用
outline-offset: -2px往内缩，部分安卓 WebView 渲染不准，容易出现虚边
!important；其余都是围绕这两点排障。别碰 table.render() 里的 page 配置，它跟圆角完全无关。
