border-image是唯一原生支持表格边框渐变的方案，但需设solid边框、separate折叠模式及border-image-slice:1；th/td则宜用background+background-clip:padding-box模拟，兼容圆角与hover动画。
border-image 是唯一能真正实现表格边框渐变的原生方案
HTML 表格（table）本身不支持 border-color: linear-gradient()，因为 border-color 只接受单色值。想让表格边框“真正”带渐变，必须用 border-image —— 但它对表格结构极其敏感，稍有不慎就失效。
常见错误现象：border-image 写了但没效果，或只在部分边显示、四角断裂、圆角消失。
-
border-style必须显式设为solid（不能是none或省略），否则border-image完全不渲染 -
border-width要足够大（建议 ≥ 3px），太窄时渐变拉伸后看不出过渡 - 表格默认
border-collapse: collapse，这会破坏border-image的独立边框渲染，必须改为separate -
border-image-slice: 1是关键，缺它会导致渐变被裁切成 9 宫格，四角重复错位
实操示例（适用于 table 元素本身，非单元格）：
table {
border: 4px solid;
border-style: solid;
border-collapse: separate;
border-image: linear-gradient(90deg, #4a6fa5, #6b8cce) 1;
}
给 th/td 加渐变边框？用 background + padding 模拟更稳
直接给 th 或 td 设 border-image 极易出问题：单元格边框共享、合并模式干扰、响应式缩放失真。此时放弃“真实边框”，改用视觉模拟更可靠。
立即学习“前端免费学习笔记（深入）”；
核心思路：把渐变画在单元格的 background 上，再用 background-clip: padding-box 把它“锁”在内边距区域，形成伪边框。
- 兼容性好（IE10+），不受
border-collapse影响 - 支持任意
border-radius，圆角渐变不撕裂 - 不会遮挡单元格内容或影响点击区域
- 需配合
padding控制“边框”厚度，例如padding: 2px→ 渐变边框宽 2px
示例（作用于所有 th 和 td）：
th, td {
padding: 2px;
background: linear-gradient(45deg, #ff9a9e, #fad0c4);
background-clip: padding-box;
border-radius: 4px;
}
hover 时动态切换渐变边框？transition 只能作用于 background
你无法对 border-image 做 CSS 过渡（transition 不支持该属性），也不能给 border-color 加渐变动画。唯一可行路径是：把渐变放在 background 上，再过渡 background。
这意味着——所有依赖 background 模拟边框的方案（如上一节的 padding-box 方案），天然支持平滑 hover 动画；而 border-image 方案只能硬切，无过渡。
- 过渡方向可变：
background支持linear-gradient(to right, ...)→to bottom切换 - 颜色可调：
background支持多停点、透明度、甚至radial-gradient - 性能友好：现代浏览器对
background过渡优化充分，比filter: blur()更轻量 - 注意：若用伪元素方案（
::before），需确保pointer-events: none，否则 hover 会因伪元素拦截而失效
简单 hover 示例：
th:hover, td:hover {
background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
transition: background 0.3s ease;
}
为什么别碰 box-shadow 或 outline 做表格边框？
这两种方案在表格里基本是坑：它们不遵循表格盒模型规则，容易导致布局错乱、边框重叠、圆角失效，且无法精确控制单条边（比如只想渐变右边界）。
典型问题：
-
box-shadow是投影，不是边框，会被overflow: hidden截断，且无法和border-collapse: collapse共存 -
outline不支持border-radius，表格单元格圆角时 outline 仍为直角，视觉割裂 - 两者都绕不开“模糊溢出”问题：表格行高紧凑时，
filter: blur()或阴影会污染相邻单元格 - 响应式缩放下，模糊半径或阴影尺寸难以匹配，移动端极易糊成一团
结论：表格场景下，border-image 和 background-clip: padding-box 是唯二值得投入调试的方案；其他都是临时救急，上线前务必验证多行、跨列、小屏下的表现。
