HTML表格渐变背景需设在<td>上并用background-image显式声明，配合background-size、background-clip和background-origin解决尺寸、裁剪与对齐问题，同时规避<tr>兼容性陷阱。
HTML 表格本身不支持渐变背景——background-color 只能设单色，background-image: linear-gradient() 必须靠 CSS 显式声明，且需解决容器尺寸、绘制范围和边框干扰三个关键问题。
给 <table> 直接加 linear-gradient() 为什么没效果？
常见错误是只写 background: linear-gradient(...) 却忽略 table 默认有 border-collapse: collapse 和内容撑高逻辑，导致渐变区域被裁剪或仅渲染在文字行高内。
- 必须显式设
background-image，别用background简写（否则可能覆盖已有背景图或background-size） -
<table>默认不占满父容器高度，得加display: block或包裹一层div并设height: 100% - 如果表格有
border，渐变会被 border 压在下面——得配合background-clip: padding-box和预留padding
<tr> 或 <td> 上用渐变的兼容性陷阱
现代浏览器支持没问题，但 IE10–11 不支持 linear-gradient() 在 <tr> 上生效（会直接 fallback 到第一色），且旧版 Safari（iOS 9 及更早）要求 -webkit-linear-gradient() 前缀。
- 安全写法：把渐变写在
<td>上，而非<tr>（<tr>的 background 渲染行为在各浏览器中差异大） - 必须加前缀覆盖：先写
background-image: -webkit-linear-gradient(...)，再写标准版，顺序不能反 - IE10 不支持 rgba() 在渐变中透明度，若要用半透效果，改用
hsla()或换浅色逼近
让表格单元格渐变“贴边不溢出”的关键三步
渐变默认从左上角开始铺开，表格单元格小、多、宽高不定，容易出现颜色错位或边缘发虚。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 加
background-size: 200% 200%配合background-position: center，让渐变居中并拉伸覆盖整个单元格 - 必须设
background-clip: padding-box，否则渐变会画到 border 区域外（尤其圆角表格） - 如果单元格有
padding，渐变默认从 content 区开始画——加background-origin: padding-box才对齐
用渐变模拟“带边框的表格”而不是真设 border
纯 CSS 边框无法设渐变色，border-image 兼容性差（Firefox 不支持 linear-gradient 作 border-image-source），唯一可靠方案是“伪边框”。
- 给
<td>设padding: 2px，再设background-image: linear-gradient(...) - 加
background-clip: padding-box，确保渐变只画在 padding 区 - 用纯色
border: 1px solid #fff盖在最外层，视觉上就成了“渐变边框” - 注意：不要同时设
border-radius和overflow: hidden，否则 Safari 可能裁掉渐变边缘
真正难的不是写对那行 linear-gradient()，而是判断这个渐变该画在哪一层（<table> / <tr> / <td>）、是否要响应缩放、要不要兼顾圆角与边框——这些细节一漏，页面就看起来“差点意思”。
