唯一可靠方式是直接在上用background-image: linear-gradient()，并配齐background-origin: padding-box、background-clip: padding-box和background-size/background-position；和因浏览器渲染逻辑不一致且兼容性差，不可靠。

<td> 上实现渐变背景，唯一可靠方式是直接用 <code>background-image: linear-gradient()，别碰 <tr> 或 <code><table> ——它们在 IE10–11、旧版 Safari 中根本不会渲染渐变，且浏览器对 <code><tr> 背景的处理逻辑不一致，实际效果常被 <code><td> 覆盖。 <h3>为什么不能给 <code><tr> 设渐变？ <p>多数浏览器把 <code><tr> 当作“布局容器”，不生成独立绘制层；它的 <code>background 只是建议值，最终由子元素 <td> 的背景决定。实测中：<code><tr> 上加 <code>-webkit-linear-gradient() 在 iOS 9 Safari 里直接 fallback 到第一个颜色；IE10–11 完全忽略该声明。你看到的“有效”，大概率是巧合或缓存残留。

<td> 渐变必须配齐的三个属性 <p>只写 <code>background-image: linear-gradient() 不够，单元格尺寸小、有 padding、可能带 border，缺任意一项都会导致颜色错位、边缘发虚、甚至被裁掉：

• background-origin: padding-box：确保渐变起点对齐 padding 区，而不是 content 区（否则文字撑高后渐变偏移）
• background-clip: padding-box：防止渐变画到 border 外侧——尤其当用了 border-radius 时，这个属性能保住圆角裁剪边界
• background-size: 200% 200% + background-position: center：让渐变居中并拉伸覆盖整个单元格，避免左上角起始导致单侧色块过重

兼容性与透明度避坑

旧浏览器仍有现实存在，不能只靠现代语法：

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• 前缀顺序必须是：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-clip: padding-box，确保渐变只画在 padding 区
• 再套一层 background-color: #fff 盖在内容区上（即 content-box）

真正麻烦的是 background-origin 和 background-clip 的配合时机——这两个属性一旦漏设或顺序颠倒，渐变就会从文字区域开始画，或者被圆角硬裁，而这种错位在小尺寸单元格里极难肉眼识别。

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