文字渐变色需用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 之间无间隙，阴影会被相邻单元格遮挡；真正该加阴影的是包裹整个表格的容器。
- 目标元素是 class 为
layui-table的外层<div>，不是<table>或<th> - 加完阴影后，记得设
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>} - 注意
.layui-table-view是响应式模式下的最外层容器，不是.layui-table - 折叠后文字大小、行高常被重置，建议同步控制
font-size和line-height
渐变文字在低版本 Android WebView 和旧版 Safari 上支持不稳定，如果业务必须兼容，优先降级为单色 + 文字阴影（text-shadow: 0 1px 2px rgba(0,0,0,.1)）；阴影层级也容易被 fixed 列或弹层遮挡，上线前务必在真机上滚动测试。
