如何在HTML表格中利用background-gradient实现渐变背景

表格渐变色必须写在<td>或<th>上而非<tr>，因<tr>无独立背景绘制层；td需设background-size、background-clip、background-origin三属性；IE10/Safari需兼容前缀及hsla替代rgba。

表格本身不支持直接用 background 设置渐变色——<table> 和 <tr> 上写 linear-gradient() 大概率无效，尤其在旧版 Safari 和 IE 中会彻底 fallback 到单色。必须把渐变写在 <td> 或 <th> 上，并显式控制绘制范围。

为什么给 <tr> 加 linear-gradient 没效果？

现代浏览器对 <tr> 的 background 渲染行为不一致：Chrome 可能勉强渲染，Firefox 会忽略，IE10–11 直接降级为第一个颜色值（比如只显示 #ff6b6b），Safari 甚至可能完全不绘制。根本原因是 <tr> 不是“真实”的盒模型容器，它不生成独立的背景绘制层。

• 安全做法永远是把渐变声明写在 <td> 或 <th> 上
• 别依赖 border-collapse: collapse 下的 <tr> 背景——它不可靠
• 如果要用伪边框效果，也得基于 <td> 的 padding + background-clip 实现

td 上写 linear-gradient 的三个必设 CSS 属性

只写 background-image: linear-gradient(...) 远不够。单元格尺寸小、有 padding、可能带 border，渐变极易错位或被裁掉。

• background-size: 200% 200% + background-position: center：避免因单元格宽高不定导致颜色偏移
• background-clip: padding-box：确保渐变不画到 border 区域外（哪怕你没设 border，也要加）
• background-origin: padding-box：让渐变起点从 padding 区开始，而非 content 区，否则文字周围容易露白边

IE10–11 和老版 Safari 的兼容写法

IE10 需要 -ms-linear-gradient 前缀，且必须放在标准写法之前；老版 Safari（iOS 9 及更早）要求 -webkit-linear-gradient；同时 IE10 不支持 rgba() 在渐变中透明度。

立即学习“前端免费学习笔记（深入）”；

• 顺序不能错：background: -ms-linear-gradient(...); background: -webkit-linear-gradient(...); background: linear-gradient(...);
• 若需半透效果，改用 hsla(180, 100%, 50%, 0.7)，注意 s 和 l 后必须跟 % 单位，否则整个声明失效
• IE9 及更早版本无解，只能设 background-color fallback 色

想让渐变“像边框一样”围住单元格？

纯 CSS border 无法设渐变色，border-image 在 Firefox 中不支持 linear-gradient 作源，唯一可靠方案是“伪边框”。

• 给 <td> 设 padding: 2px
• 用 background-image: linear-gradient(...) 填满 padding 区
• 加 background-clip: padding-box 锁定绘制范围
• 最外层再套一层浅色 background-color，视觉上就形成“渐变描边”

别同时设 overflow: hidden——Safari 可能因此裁掉渐变边缘，这个细节调试时很难发现。