唯一稳定做法是将渐变写在上并显式声明background-image、background-size、background-position、background-origin和background-clip等属性，ie10及ios9以下需加前缀和降级色。
给 <td> 加渐变，别碰 <code><tr> 或 <code><table><p>直接在 <code><tr> 上写 <code>background-image: linear-gradient() 是无效的——IE10–11 完全不渲染，旧版 Safari 会 fallback 到第一个颜色，Chrome/Firefox 表现也不一致。表格行（<tr>）不是标准盒模型容器，它的背景渲染逻辑被浏览器私有化处理过。<code><table> 更糟：默认 <code>border-collapse: collapse 和内容撑高机制会让渐变只画在文字行高内，甚至被裁掉。
唯一稳定做法是把渐变写在 <td> 上，并显式声明所有关键属性：
<ul>
<li>
<code>background-image: linear-gradient(to right, #4facfe, #00f2fe) —— 必须用 background-image，不是 background 简写（否则会清空 background-size 和 background-repeat）
background-size: 200% 200% + background-position: center —— 防止小单元格里渐变错位或发虚background-origin: padding-box —— 让渐变从内边距区域开始绘制，对齐内容background-clip: padding-box —— 确保渐变不溢出到 border 区域（尤其圆角表格）
linear-gradient() 写错一个字符，整个背景就变透明
浏览器对 linear-gradient() 语法极其敏感。漏逗号、单位写错、关键词拼错，整条声明会被丢弃，回退到透明或父级背景——页面“露底”就是这么来的。
常见失效写法：
-
linear-gradient(to right #ff6b6b #4ecdc4)→ 缺少逗号，失效 -
linear-gradient(45, #ff6b6b, #4ecdc4)→ 角度缺deg，失效 -
linear-gradient(toright, #ff6b6b, #4ecdc4)→toright不是合法关键词，失效
正确写法必须带方向关键词或角度，且逗号分隔：
linear-gradient(to right, #ff6b6b, #4ecdc4)linear-gradient(135deg, #6a11cb, #2575fc)
要“渐变边框”，别设 border，用 padding + background-clip
CSS 的 border 属性本身不支持渐变色；border-image: linear-gradient() 在 Firefox 中完全不生效，兼容性差到没法用。
可靠方案是伪造边框：
- 给
<td> 设 <code>padding: 2px - 写渐变时用
background-clip: padding-box - 再套一层纯色背景（如
background-color: #fff）盖在外围 - 先写降级色：
background-color: #4facfe - 再写 IE10 前缀：
background-image: -ms-linear-gradient(to right, #4facfe, #00f2fe) - 然后 WebKit 前缀：
background-image: -webkit-linear-gradient(to right, #4facfe, #00f2fe) - 最后标准写法：
background-image: linear-gradient(to right, #4facfe, #00f2fe)
视觉上就是“渐变描边”，且所有现代浏览器表现一致。注意：如果同时设了 overflow: hidden，Safari 可能裁掉渐变边缘，慎用。
IE10 和 iOS 9 以下必须加前缀和降级色
IE10 要求 -ms-linear-gradient()，iOS 9 及更早 Safari 必须用 -webkit-linear-gradient()。而且 IE10 不支持 rgba() 在渐变中透明度，要用 hsla() 或浅色逼近。
安全写法顺序不能乱：
前缀必须写在标准版前面，否则会被覆盖。Autoprefixer 默认不生成 -ms-，得手动配或用 postcss-ie11 插件。
background-size 和 background-position 不配齐，就会出现每格颜色偏移、边缘发灰——这不是代码写错，是渲染范围没对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
