给 <tr> 加渐变常失效，因规范未强制支持其背景绘制；应将渐变写在 <th> 或 <td> 上，并配合 background-size、background-position、background-origin 和 background-clip 确保精准渲染。

直接给 `` 元素加 `background-image: linear-gradient()` 就能生效，但必须避开 ` ` 上设渐变的兼容性坑，且要处理好 padding、裁剪和尺寸对齐。

为什么给 <tr> 加渐变经常失效

现代浏览器对 `

` 的 `background` 渲染行为不一致：Chrome 可能渲染，Firefox 会忽略，IE10–11 直接 fallback 到第一个颜色（整个表头变单色）。这不是 bug，是规范没强制要求 ` ` 支持背景绘制——它本质是行容器，不是绘图上下文。

• 安全做法永远是把渐变写在 `` 或 ` ` 上，而不是 ` `
• 如果用了 ``，也别给它设渐变；它只是语义分组，不参与视觉绘制
• 用 DevTools 检查 computed styles 时，会发现 `` 的 background 常显示为 `none`，哪怕你写了 CSS

  <th> 上渐变要加哪些关键 CSS 才不发虚、不偏移

  默认渐变从左上角开始铺，而 `

  ` 宽高不定、常带 padding 和 border，容易导致颜色错位或边缘模糊。
  • 必须显式写 background-image，别用 background 简写（否则可能覆盖 background-size）
  • 加 background-size: 200% 200% + background-position: center，让渐变拉伸并居中覆盖整个单元格
  • 加 background-origin: padding-box，确保渐变从 padding 区起始绘制（不然文字紧贴边时颜色会“缩进”）
  • 加 background-clip: padding-box，防止渐变溢出到 border 下方（尤其设了 border-radius 时）

  IE10–11 和旧 Safari 怎么兼容渐变

  IE10–11 不支持标准 linear-gradient()，也不认 `rgba()` 透明度；iOS 9 及更早 Safari 必须加 `-webkit-` 前缀，且顺序不能错。

  

  html-ppt-to-pdf

  将使用 `

  ` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

  下载
  • 写法必须是：background-image: -webkit-linear-gradient(...); background-image: linear-gradient(...); —— 前缀版在前，标准版在后
  • IE10 fallback 要单独写：background: #4facfe;（纯色），不能只靠前缀版撑着
  • 避免在渐变里用 rgba(255,0,0,0.5)；改用 hsla(0,100%,50%,0.5) 或直接换浅色逼近半透感
  • 测试时打开 IE11 的“仿真模式”，别信 Autoprefixer 默认配置——它不加 -ms- 前缀

  怎么用渐变做出“带渐变边框”的表头效果

  CSS `border` 本身不支持渐变色，`border-image: linear-gradient()` 在 Firefox 中不工作，唯一可靠方案是“伪边框”。

  立即学习“前端免费学习笔记（深入）”；

  • 给 `` 设 padding: 4px（比如上下各 2px，左右各 4px）
  • 再设 background-image: linear-gradient(90deg, #4facfe, #00f2fe)
  • 加 background-clip: padding-box，确保渐变只画在 padding 区
  • 最外层用一层浅色背景盖住（如 background-color: #f8f9fa），视觉上就形成“渐变边框+浅色底”的层次
  • 注意：别同时设 overflow: hidden，Safari 可能因此裁掉渐变边缘
  实际最简可用代码片段：

  th {
    background-color: #f8f9fa;
    background-image: -webkit-linear-gradient(90deg, #4facfe, #00f2fe);
    background-image: linear-gradient(90deg, #4facfe, #00f2fe);
    background-size: 200% 200%;
    background-position: center;
    background-origin: padding-box;
    background-clip: padding-box;
    padding: 2px 12px;
  }

  表格标题行渐变真正难的不是写法，而是**主动放弃对 ` ` 的幻想**，以及记住 `background-clip` 和 `background-origin` 这两个常被跳过的属性——漏一个，边缘就发虚，偏移就明显。