Layui表格怎么设置thead表头的文字渐变色和阴影效果-Layui教程-PHP中文网

文字渐变色需用background-image+background-clip:text+color:transparent三者配合实现，阴影须加在.layui-table容器上并设overflow:hidden；响应式下需单独适配.layui-table-col-spread结构。

文字渐变色和阴影效果都不能靠 table.render() 的配置项实现，必须用 css 覆盖；但两者生效逻辑不同：文字渐变依赖 background-image + -webkit-background-clip: text 组合，而阴影得加在 .layui-table 容器上，不是 th 本身。

给表头文字加渐变色要用 background-clip:text

Layui 的 th 默认用纯色文字，不支持直接设文字渐变。CSS 中没有 color: linear-gradient() 这种写法，必须借道 background-image 和裁剪。

必须同时设置 background-image: linear-gradient()、-webkit-background-clip: text、color: transparent，三者缺一不可
只写 background: linear-gradient() 不会生效——那只是背景图，没告诉浏览器“用它当文字颜色”
-webkit-background-clip: text 是关键，它让背景只显示在文字区域；但它是非标准属性，Firefox 需要加 background-clip: text（新版已支持）
别忘了加 color: transparent，否则文字会被默认色盖住渐变

示例（蓝紫渐变文字）：

.layui-table thead th {<br>  background: linear-gradient(135deg, #1890ff, #722ed1);<br>  -webkit-background-clip: text;<br>  background-clip: text;<br>  color: transparent;<br>  font-weight: 600;<br>}

表头整体加阴影不能只作用于 th 元素

给 th 加 box-shadow 没用——Layui 表头是平铺的，每个 th 之间无间隙，阴影会被相邻单元格遮挡；真正该加阴影的是包裹整个表格的容器。

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

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

下载

目标元素是 class 为 layui-table 的外层 <div>，不是 <code><table> 或 <code><th> <li>加完阴影后，记得设 <code>overflow: hidden，否则圆角+阴影可能溢出
如果表格启用了固定列（fixed: true），layui-table-box 容器会盖住阴影边缘，此时需给它加 padding: 0 4px 留出空间

示例（轻量阴影+圆角）：

.layui-table {<br>  box-shadow: 0 2px 8px rgba(0,0,0,.08);<br>  border-radius: 6px;<br>  overflow: hidden;<br>}

移动端响应式折叠后渐变和阴影全失效

开启 responsive: true 后，小屏下表头 DOM 结构完全重构成 .layui-table-col-spread，原 th 样式彻底不匹配，渐变和容器阴影都丢失。

必须单独写媒体查询，针对折叠后的结构重新定义样式：

@media (max-width: 768px) {<br>  .layui-table-col-spread .layui-table-col-title {<br>    background: linear-gradient(135deg, #1890ff, #722ed1);<br>    -webkit-background-clip: text;<br>    background-clip: text;<br>    color: transparent;<br>  }<br>  .layui-table-view {<br>    box-shadow: 0 2px 6px rgba(0,0,0,.06);<br>  }<br>}