表格渐变背景必须作用于，因和存在裁剪、渲染不一致等问题；需配合background-size、background-position、background-clip: padding-box、background-origin: padding-box确保贴边不溢出；模拟渐变边框应采用padding+伪背景方案。

表格本身不支持渐变背景，background-color只能设单色；必须用background-image: linear-gradient()显式作用于，且要解决尺寸、裁剪和边框干扰三个实际问题。

为什么给 或 加 linear-gradient() 没效果？

常见错误是直接写在

上，或误用——的background渲染行为在各浏览器中差异极大，IE10–11 会 fallback 到第一色，Safari 旧版甚至忽略整条声明。

默认border-collapse: collapse，内容撑高逻辑导致渐变区域被裁剪或仅覆盖文字行高

不是可靠绘制容器，现代浏览器虽能部分渲染，但无法保证background-clip、background-origin生效

安全写法：只把linear-gradient()写在

上，每个单元格独立控制 怎样让

的渐变“贴边不溢出”？ 渐变默认从左上角开始铺开，而

宽高不定、常带padding和border，容易颜色错位或边缘发虚。 加background-size: 200% 200% + background-position: center，拉伸并居中渐变 必须设background-clip: padding-box，否则渐变会画到border外（尤其圆角表格） 如果

有padding，渐变默认从content区起始——加background-origin: padding-box才对齐 别同时设overflow: hidden，Safari 可能裁掉渐变边缘 如何用渐变模拟“渐变边框”而不是真设 border？ CSS 原生border不支持渐变色，border-image在 Firefox 中不支持linear-gradient()作源，唯一可靠方案是“伪边框”。 给

设padding: 2px（即“边框宽度”） 用background-image: linear-gradient()填充这个padding区域 配合background-clip: padding-box，确保渐变只画在padding内 最外层用纯色background-color盖住内部内容，视觉上就成了“渐变边框” 真正麻烦的不是写法，而是background-clip和background-origin的组合时机——漏掉任意一个，渐变就会在不同设备上偏移几像素，肉眼难查但设计稿对不上。别图省事合并声明，每个属性单独写，调试时才看得清谁在捣鬼。 Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转 实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。 下载

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