直接写 linear-gradient() 无效是因为 table 单元格非标准盒模型容器，不生成独立背景层；必须写在 td/th 上并配齐 background-size、background-origin、background-clip 三属性，且需兼容前缀与降级方案。
为什么直接给 写 linear-gradient() 没效果
因为
不是标准盒模型容器，不生成独立背景绘制层。Chrome 可能勉强渲染，Firefox 会忽略，IE10–11 直接 fallback 到第一个颜色（比如只显示 #ff6b6b），Safari 甚至完全不画。这不是 bug，而是规范行为——
的 background 渲染由浏览器自行决定，不可控。
必须把渐变写在 或
上，并配齐三个关键属性
只写 background-image: linear-gradient(to right, #ff6b6b, #4ecdc4) 远不够。单元格尺寸小、有 padding、可能带 border，渐变极易错位或被裁掉。
-
background-size: 200% 200% + background-position: center：避免因单元格宽高不定导致颜色偏移
-
background-clip: padding-box：确保渐变不画到 border 区域外（哪怕没设 border，也要加）
-
background-origin: padding-box：让渐变起点从 padding 区开始，而非 content 区，否则文字周围容易露白边
IE10 和老版 Safari 的兼容写法不能省
IE10 需要 -ms-linear-gradient() 前缀，且必须放在标准写法之前；老版 Safari（iOS 9 及更早）要求 -webkit-linear-gradient()；同时 IE10 不支持 rgba() 在渐变中设透明度。
- 正确顺序：
background-image: -webkit-linear-gradient(...); background-image: -ms-linear-gradient(...); background-image: linear-gradient(...);
- 半透效果别用
rgba(0,0,0,0.3)，改用 hsla(0, 0%, 0%, 0.3)，注意 s 和 l 后必须跟 % 单位，否则整条声明失效
- IE9 及更早无解，只能设
background-color: #f5f5f5 作为降级色
想模拟“渐变边框”？别碰 border-image
border-image 在 Firefox 中不支持 linear-gradient() 作源，纯 CSS border 本身也不支持渐变色。唯一可靠方案是“伪边框”：
立即学习“前端免费学习笔记（深入）”；
- 给
<td> 设 <code>padding: 2px
- 用
background-image: linear-gradient(...) 填满 padding 区
- 加
background-clip: padding-box 锁定绘制范围
- 最外层再套一层浅色
background-color，视觉上就形成“渐变描边”
真正麻烦的不是写法，而是每个
都得显式控制 background-size、background-origin 和 background-clip —— 少一个，渐变就可能偏移、溢出或露白。别图省事只写 background 简写，它会悄悄覆盖掉你已设的 background-size。
因为
#ff6b6b），Safari 甚至完全不画。这不是 bug，而是规范行为——必须把渐变写在 或
上，并配齐三个关键属性
只写 background-image: linear-gradient(to right, #ff6b6b, #4ecdc4) 远不够。单元格尺寸小、有 padding、可能带 border，渐变极易错位或被裁掉。
-
background-size: 200% 200% + background-position: center：避免因单元格宽高不定导致颜色偏移
-
background-clip: padding-box：确保渐变不画到 border 区域外（哪怕没设 border，也要加）
-
background-origin: padding-box：让渐变起点从 padding 区开始，而非 content 区，否则文字周围容易露白边
IE10 和老版 Safari 的兼容写法不能省
IE10 需要 -ms-linear-gradient() 前缀，且必须放在标准写法之前；老版 Safari（iOS 9 及更早）要求 -webkit-linear-gradient()；同时 IE10 不支持 rgba() 在渐变中设透明度。
- 正确顺序：
background-image: -webkit-linear-gradient(...); background-image: -ms-linear-gradient(...); background-image: linear-gradient(...);
- 半透效果别用
rgba(0,0,0,0.3)，改用 hsla(0, 0%, 0%, 0.3)，注意 s 和 l 后必须跟 % 单位，否则整条声明失效
- IE9 及更早无解，只能设
background-color: #f5f5f5 作为降级色
想模拟“渐变边框”？别碰 border-image
border-image 在 Firefox 中不支持 linear-gradient() 作源，纯 CSS border 本身也不支持渐变色。唯一可靠方案是“伪边框”：
立即学习“前端免费学习笔记（深入）”；
- 给
<td> 设 <code>padding: 2px
- 用
background-image: linear-gradient(...) 填满 padding 区
- 加
background-clip: padding-box 锁定绘制范围
- 最外层再套一层浅色
background-color，视觉上就形成“渐变描边”
真正麻烦的不是写法，而是每个
都得显式控制 background-size、background-origin 和 background-clip —— 少一个，渐变就可能偏移、溢出或露白。别图省事只写 background 简写，它会悄悄覆盖掉你已设的 background-size。
只写 background-image: linear-gradient(to right, #ff6b6b, #4ecdc4) 远不够。单元格尺寸小、有 padding、可能带 border，渐变极易错位或被裁掉。
-
background-size: 200% 200%+background-position: center：避免因单元格宽高不定导致颜色偏移 -
background-clip: padding-box：确保渐变不画到 border 区域外（哪怕没设 border，也要加） -
background-origin: padding-box：让渐变起点从 padding 区开始，而非 content 区，否则文字周围容易露白边
IE10 和老版 Safari 的兼容写法不能省
IE10 需要 -ms-linear-gradient() 前缀，且必须放在标准写法之前；老版 Safari（iOS 9 及更早）要求 -webkit-linear-gradient()；同时 IE10 不支持 rgba() 在渐变中设透明度。
- 正确顺序：
background-image: -webkit-linear-gradient(...); background-image: -ms-linear-gradient(...); background-image: linear-gradient(...); - 半透效果别用
rgba(0,0,0,0.3)，改用hsla(0, 0%, 0%, 0.3)，注意s和l后必须跟%单位，否则整条声明失效 - IE9 及更早无解，只能设
background-color: #f5f5f5作为降级色
想模拟“渐变边框”？别碰 border-image
border-image 在 Firefox 中不支持 linear-gradient() 作源，纯 CSS border 本身也不支持渐变色。唯一可靠方案是“伪边框”：
立即学习“前端免费学习笔记（深入）”；
- 给
<td> 设 <code>padding: 2px - 用
background-image: linear-gradient(...)填满 padding 区 - 加
background-clip: padding-box锁定绘制范围 - 最外层再套一层浅色
background-color，视觉上就形成“渐变描边”
真正麻烦的不是写法，而是每个
background-size、background-origin 和 background-clip —— 少一个，渐变就可能偏移、溢出或露白。别图省事只写 background 简写，它会悄悄覆盖掉你已设的 background-size。
