给 <td> 或 <th> 加 background: linear-gradient() 可行，但需控住容器行为和绘制范围；<tr> 因无盒模型尺寸、渲染逻辑不统一而禁用渐变；应显式设置 background-image、background-size、background-position 和 background-origin，并用 padding + background-clip 模拟渐变边框，兼容 IE10–11 需加前缀及 fallback。
直接给 <td> 或 <th> 加 background: linear-gradient() 是可行的，但多数人卡在渲染失效、颜色错位、边框压盖或 IE 兼容上——问题不在写法本身，而在容器行为和绘制范围没控住。
为什么给 <tr> 加渐变经常没效果？
浏览器对 <tr> 的背景渲染逻辑不统一：Chrome 可能继承 <td> 的尺寸，Firefox 会忽略 <tr> 的 background，IE10–11 则直接 fallback 到第一个颜色。更麻烦的是，<tr> 本身没有盒模型尺寸，它只是行容器，渐变起点难锚定。
- 安全做法永远是把渐变写在
<td>或<th>上，而不是<tr> - 如果真要整行控制，用
tr:hover td这类选择器批量改<td>的背景，别碰<tr>自身 - 避免用
border-collapse: collapse+<tr>渐变组合——塌陷边框会让渐变区域被裁掉
background-image: linear-gradient() 必须显式声明
写成 background: linear-gradient(...) 看似省事，但一旦元素已有其他背景（比如图片、颜色），简写会覆盖全部子属性，包括 background-size 和 background-position，导致渐变拉伸错乱或只显示一角。
- 正确写法：
background-image: linear-gradient(135deg, #4facfe, #00f2fe); - 必须配套：
background-size: 200% 200%; background-position: center;，否则小单元格里渐变容易偏移或发虚 - 若单元格有
padding，加background-origin: padding-box;，让渐变从内边距起始画，不然会被文字撑开错位
边框与渐变共存的实际方案
CSS border 无法设渐变色，border-image: linear-gradient() 在 Firefox 中不支持，硬套会挂。唯一稳定解法是“伪边框”——用 padding + background-clip 挤出视觉边框。
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
立即学习“前端免费学习笔记（深入）”；
- 给
<td>设padding: 2px;，再设background-clip: padding-box; - 渐变区域就限定在 padding 区，外层留白形成“边框感”
- 如果需要实色外框，额外包一层
<div>或用outline模拟，别指望 border 本身渐变 - 注意：
overflow: hidden在 Safari 中可能裁掉渐变边缘，慎用
IE10–11 和旧 Safari 的兼容底线
IE10–11 支持 -ms-linear-gradient()，但不认 rgba() 透明度；iOS 9 及更早 Safari 需要 -webkit-linear-gradient() 前缀，且顺序不能反。
- 最低兼容写法（含 fallback）：
td { background-color: #4facfe; background-image: -webkit-linear-gradient(135deg, #4facfe, #00f2fe); background-image: -ms-linear-gradient(135deg, #4facfe, #00f2fe); background-image: linear-gradient(135deg, #4facfe, #00f2fe); } - 别依赖 Autoprefixer 自动生成
-ms-，它默认不处理，得手动加或配 postcss-ie11 - 要半透效果？IE10 不支持 rgba()，改用
hsla(200, 100%, 60%, 0.8)或换浅色逼近
真正麻烦的不是写几行 CSS，而是每个 <td> 都是独立盒子，宽高由内容撑开、padding 影响原点、border 干扰绘制范围——渐变不是贴图，它是按盒模型实时重绘的，稍一松手就错位。
