表格渐变色必须写在<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-colorfallback 色
想让渐变“像边框一样”围住单元格？
纯 CSS border 无法设渐变色，border-image 在 Firefox 中不支持 linear-gradient 作源，唯一可靠方案是“伪边框”。
- 给
<td>设padding: 2px - 用
background-image: linear-gradient(...)填满 padding 区 - 加
background-clip: padding-box锁定绘制范围 - 最外层再套一层浅色
background-color，视觉上就形成“渐变描边”
别同时设 overflow: hidden——Safari 可能因此裁掉渐变边缘，这个细节调试时很难发现。
