直接写 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() 在渐变中设透明度。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 正确顺序：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。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！