html表格border属性不支持渐变色，因css规范禁止；border-image失效主因是border-collapse:collapse，默认需设separate、solid边框、border-image-slice:1且border-width足够；最可靠方案是background+padding+background-clip:padding-box模拟渐变边框，并支持transition。
HTML 表格的 border 属性本身不支持渐变色，border-color: linear-gradient() 会被浏览器直接忽略——这不是你写错了，是 CSS 规范根本不允许。
为什么直接给 table 写 border-image 没效果？
常见错误是：table { border: 2px solid; border-image: linear-gradient(...) 1; } 写了但边框还是单色，甚至消失。原因很实在：
-
border-collapse: collapse（表格默认值）会破坏border-image的渲染逻辑，必须显式设为separate -
border-style不能省略或设为none，必须是solid、dashed等可绘制样式 -
border-image-slice: 1缺失会导致渐变被切成 9 宫格，四角重复、拉伸错位 -
border-width太小（如1px）时，渐变过渡区域过窄，肉眼几乎看不出变化
给 td 加渐变“边框”的最小可靠配置
绕过表格边框限制最稳的方式：用 background + padding 模拟，视觉上就是渐变边框，且兼容性好（IE10+）、支持 border-radius 和 hover 过渡。
-
padding值必须 ≥ 你想呈现的“边框粗细”，比如要 2px 渐变边框，就写padding: 2px - 加
border: 2px solid transparent占位，防止内容塌陷或尺寸抖动 -
background-clip: padding-box是关键——它把渐变锁在内边距区域，不会画到文字上或圆角外 - 渐变方向建议用
to right或to bottom，避免斜向渐变在相邻单元格间起点错位
示例：
td {
padding: 2px;
border: 2px solid transparent;
background: linear-gradient(90deg, #4a6fa5, #6b8cce);
background-clip: padding-box;
}
hover 时切换渐变边框只能靠 background
border-image 不支持 transition，border-color 也不能接渐变函数——唯一能平滑过渡的路径，就是把渐变放在 background 上。
- 所有基于
background+background-clip: padding-box的方案，天然支持transition: background 0.3s - 不要试图给
border-image加过渡，浏览器会静默忽略 - 如果用了伪元素模拟边框，也要对伪元素的
background做过渡，而非border
真正麻烦的不是写法，而是表格结构本身：colspan/rowspan 会让单元格尺寸不规则，导致渐变起点不一致；border-collapse: separate 又会引入额外间隙。这些细节不调好，渐变看起来就是“拼起来的”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
