Layui如何修改laypage分页组件中当前页码的背景渐变色-Layui教程-PHP中文网

当前页按钮渐变背景必须用background属性而非background-color，因linear-gradient()非合法颜色值；需同时覆盖.layui-laypage-curr和其子元素.layui-laypage-em，并加!important确保生效，推荐方向为135deg。

当前页按钮的渐变背景必须用 `background`，不是 `background-color`

layui 的 .layui-laypage-curr 元素默认只设了 background-color，而渐变是 background 属性的值。如果你写 background-color: linear-gradient(...)，浏览器会直接忽略——因为 linear-gradient() 不是合法的颜色值。

正确做法是直接覆盖 background 属性，并确保它生效：

必须加 !important：Layui 2.8+ 内联样式权重高，不加几乎必失效
渐变方向推荐用角度（如 135deg），比 to right 兼容性更稳
避免只改 .layui-laypage-curr：它包裹着一个 .layui-laypage-em 子元素，实际显示的是这个子元素，所以两个都要覆盖

示例 CSS（放在页面末尾、layui.all.js 加载之后）：

.layui-laypage .layui-laypage-curr,
.layui-laypage .layui-laypage-curr .layui-laypage-em {
  background: linear-gradient(135deg, #4a9ff5, #1890ff) !important;
  color: #fff !important;
  border: none !important;
}

为什么只改 `.layui-laypage-curr` 没反应？

常见错误是只写了：

.layui-laypage .layui-laypage-curr { background: linear-gradient(...) !important; }

但 Layui 渲染时，当前页按钮结构其实是：

<span class="layui-laypage-curr">
  <em class="layui-laypage-em">1</em>
</span>

真正带背景色和圆角的是 .layui-laypage-em，而 .layui-laypage-curr 默认是透明背景、仅控制 padding 和边框。只改外层，内层仍用默认蓝底白字。

所以必须同时命中两个选择器，且优先级足够高：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

不要漏掉空格：.layui-laypage .layui-laypage-curr .layui-laypage-em 是嵌套关系，不能写成 .layui-laypage-curr .layui-laypage-em（缺少父级限定，可能被其他样式干扰）
如果用了模块化引入（如 ES Module），Layui 2.8+ 默认启用 scoped 样式隔离，此时需把 CSS 放进 <style scoped></style> 或用 :deep(.layui-laypage-curr)（Vue 场景）
动态加载内容（如 iframe 或 tab 切换）后分页重绘，样式可能丢失——可在 laypage.render() 的 jump 回调里重新注入这段 CSS

移动端下渐变色被压缩或错位怎么办

Layui 在小屏下会把分页按钮横向压缩，并自动减小 font-size 和 padding，但渐变背景不会自适应缩放，容易显得局促或溢出。

解决办法是加媒体查询微调尺寸，同时保持渐变比例正常：

在渐变规则后追加 @media (max-width: 768px) 块
只调 padding 和 font-size，不要动 background ——渐变本身不需要适配
注意 .layui-laypage-em 的 border-radius 在小屏下可能变尖锐，可同步重置为 4px

示例：

@media (max-width: 768px) {
  .layui-laypage .layui-laypage-curr .layui-laypage-em {
    padding: 0 12px !important;
    font-size: 12px !important;
    border-radius: 4px !important;
  }
}

渐变色和 hover 效果冲突怎么处理

Layui 默认给所有分页按钮（包括当前页）加了 :hover 状态，但当前页按钮本不该响应 hover —— 可一旦没显式禁用，鼠标移上去时，.layui-laypage-curr:hover 会触发默认深色背景，直接盖掉你的渐变。

必须显式重写 hover 状态并设为空或继承：

加一条规则：.layui-laypage .layui-laypage-curr:hover { background: transparent !important; }
或者更稳妥：.layui-laypage .layui-laypage-curr:hover, .layui-laypage .layui-laypage-curr:hover .layui-laypage-em { background: inherit !important; }
别忘了检查 .layui-laypage-curr 是否有 box-shadow，某些主题会加阴影，hover 时也放大，一并清掉更干净

最易被忽略的是：这个 hover 覆盖必须和渐变规则写在一起，否则顺序错乱会导致 hover 依然生效。