最可靠的做法是直接给 设置 background-image: linear-gradient() 并配齐 background-size、background-origin 和 background-clip 三个属性，因 渲染逻辑不一致且 ie10–11、旧版 safari 不支持其渐变，而 渐变易被子元素覆盖；需添加 -webkit- 前缀并避免 rgba() 透明度以保障兼容性。
直接给 <td> 加 <code>background-image: linear-gradient() 是最可靠的做法，别碰 <tr> 或 <code><table> 上的渐变——兼容性差、渲染行为不一致，尤其在 IE10–11 和旧版 Safari 中会直接失效或只显示第一色。
<h3>为什么 <code><tr> 上设渐变经常没效果？
<p>浏览器对 <code><tr> 的背景渲染逻辑差异极大：<code><tr> 本身不是块级容器，它的 background 在多数引擎中只是“建议值”，最终由子元素 <code><td> 覆盖；IE10–11 完全忽略 <code><tr> 上的 <code>linear-gradient()，Safari iOS 9 及更早版本也不支持。实测中，哪怕加了 -webkit-linear-gradient() 前缀，<tr> 渐变仍大概率 fallback 到纯色。
<p>解决办法只有一个：把渐变写死在 <code><td> 上，显式控制每个单元格的绘制范围。
<h3><code><td> 渐变必须配齐的三个 CSS 属性
<p>只写 <code>background-image: linear-gradient() 不够，单元格尺寸小、有 padding、可能带 border，缺任意一项都会导致颜色错位、边缘发虚、甚至被裁掉：
-
background-size: 200% 200%+background-position: center：避免渐变从左上角拉伸导致单侧色块过重 -
background-origin: padding-box：确保渐变起点对齐 padding 区，而不是 content 区（否则文字撑高后渐变偏移） -
background-clip: padding-box：防止渐变画到 border 外侧——尤其当用了border-radius时，这个属性能保住圆角裁剪边界
兼容性兜底和透明度避坑
旧浏览器仍有现实存在，不能只靠现代语法：
- 必须按顺序写前缀：
background-image: -webkit-linear-gradient(...); background-image: linear-gradient(...);，标准版放后面，否则 IE/旧 Safari 会跳过 - IE10 不支持
rgba()在渐变中设透明度，若需半透效果，改用hsla(200, 100%, 80%, 0.5)或退阶为浅色逼近 - 不要依赖
background: linear-gradient()简写，它可能意外覆盖已设的background-size或图片，始终用background-image单独声明
想模拟“渐变边框”怎么办？
CSS border 本身不支持渐变，border-image 在 Firefox 中不支持 linear-gradient() 作源，唯一稳定方案是“伪边框”：
- 给
<td> 设 <code>padding: 2px - 用
background-image: linear-gradient()填充整个 padding 区 - 再套一层
background-color: #fff盖在内容区上（即 content-box） - 视觉上就是“外圈渐变 + 内容白底”，等效于渐变边框
注意：overflow: hidden 在 Safari 中可能误裁渐变边缘，慎用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
