表格渐变背景必须作用于<td>，因<table>和<tr>存在裁剪、渲染不一致等问题；需配合background-size、background-position、background-clip: padding-box、background-origin: padding-box确保贴边不溢出；模拟渐变边框应采用padding+伪背景方案。
表格本身不支持渐变背景，background-color只能设单色；必须用background-image: linear-gradient()显式作用于<td>，且要解决尺寸、裁剪和边框干扰三个实际问题。
<h3>为什么给 <code><table> 或 <tr> 加 linear-gradient() 没效果？
常见错误是直接写在<table>上，或误用<tr>——<tr>的background渲染行为在各浏览器中差异极大，IE10–11 会 fallback 到第一色，Safari 旧版甚至忽略整条声明。
-
<table>默认border-collapse: collapse，内容撑高逻辑导致渐变区域被裁剪或仅覆盖文字行高 -
<tr>不是可靠绘制容器，现代浏览器虽能部分渲染，但无法保证background-clip、background-origin生效 - 安全写法：只把
linear-gradient()写在<td>上，每个单元格独立控制
怎样让 <td> 的渐变“贴边不溢出”？
渐变默认从左上角开始铺开，而<td>宽高不定、常带padding和border，容易颜色错位或边缘发虚。
- 加
background-size: 200% 200%+background-position: center，拉伸并居中渐变 - 必须设
background-clip: padding-box，否则渐变会画到border外（尤其圆角表格） - 如果
<td>有padding，渐变默认从content区起始——加background-origin: padding-box才对齐 - 别同时设
overflow: hidden，Safari 可能裁掉渐变边缘
如何用渐变模拟“渐变边框”而不是真设 border？
CSS 原生border不支持渐变色，border-image在 Firefox 中不支持linear-gradient()作源，唯一可靠方案是“伪边框”。
立即学习“前端免费学习笔记（深入）”；
- 给
<td>设padding: 2px（即“边框宽度”） - 用
background-image: linear-gradient()填充这个padding区域 - 配合
background-clip: padding-box，确保渐变只画在padding内 - 最外层用纯色
background-color盖住内部内容，视觉上就成了“渐变边框”
真正麻烦的不是写法，而是background-clip和background-origin的组合时机——漏掉任意一个，渐变就会在不同设备上偏移几像素，肉眼难查但设计稿对不上。别图省事合并声明，每个属性单独写，调试时才看得清谁在捣鬼。
