HTML表格渐变背景必须设在<td>上并用background-image显式声明，配合background-size、background-clip和background-origin解决尺寸、裁剪与对齐问题，同时规避<tr>兼容性陷阱。
表格本身不支持直接设渐变背景，background-color只能填单色，linear-gradient()必须靠 background-image 显式声明，且必须落在 <td> 上——写在 <code><tr> 或 <code><table> 上，90% 情况下会失效或渲染错乱。
<h3>为什么给 <code><table> 加 linear-gradient() 没效果
常见错误是直接写 table { background: linear-gradient(...); }。问题有三：
-
<table>默认border-collapse: collapse，内容撑不开高度，渐变只渲染在几像素高的“空行”里 - 表格没有显式
height或min-height，浏览器按内容自动计算高度，往往远小于视觉预期 -
background简写会隐式重置background-repeat和background-size，导致渐变被平铺成条纹或只显示一角
正确做法：渐变必须写在 <td> 上并配齐三属性
把渐变从 <tr> 下沉到每个 <td>，才能规避浏览器对 <tr> 渲染行为的差异（尤其 IE10–11、旧 Safari）。
- 用
background-image而非background简写，避免覆盖已有设置 - 加
background-size: 200% 200%+background-position: center，让渐变居中拉伸，填满不定宽高的单元格 - 必须设
background-clip: padding-box，否则渐变会画到 border 外；如果单元格有padding，再加background-origin: padding-box对齐起点
示例 CSS：
立即学习“前端免费学习笔记（深入）”；
td {
background-image: linear-gradient(135deg, #ff9a9e, #fad0c4);
background-size: 200% 200%;
background-position: center;
background-clip: padding-box;
background-origin: padding-box;
padding: 12px;
}
兼容性坑：IE10 和旧 Safari 必须加前缀和降级色
IE10 不识别标准 linear-gradient()，旧版 Safari（iOS 9 及更早）要求 -webkit-linear-gradient() 前缀，且不支持 rgba() 透明度。
- 前缀顺序不能反：先写
-webkit-，再写-ms-（IE10），最后写标准版 - 降级色必须单独一行写在最前面，比如
background-color: #ff9a9e;，IE9 及更早会 fallback 到它 - 若要用半透效果，别用
rgba(255,0,0,0.5)，改用hsla(0,100%,50%,0.5)或换浅色逼近
完整兼容写法：
td {
background-color: #ff9a9e;
background-image: -webkit-linear-gradient(135deg, #ff9a9e, #fad0c4);
background-image: -ms-linear-gradient(135deg, #ff9a9e, #fad0c4);
background-image: linear-gradient(135deg, #ff9a9e, #fad0c4);
}
想模拟“渐变边框”？别设 border，用伪边框方案
CSS border 无法设渐变色，border-image 在 Firefox 中不支持 linear-gradient() 作源，唯一可靠方案是“伪边框”。
- 给
td设小尺寸padding（如2px），再把渐变画在padding-box区域 - 外层用纯色背景（如父容器或
table的background-color）盖住内容区，视觉上就形成“渐变描边” - 注意：不要同时设
overflow: hidden，Safari 可能裁掉渐变边缘（截至 2026 年 7 月）
关键点始终是：渐变起点必须对齐视觉边界，而 background-origin 和 background-clip 就是控制这个对齐的开关——漏掉任何一个，颜色就会偏移或溢出。
