border-image 在 table 上基本不可用，因其依赖独立矩形边框，而表格 border-collapse 会合并单元格边框，破坏切片机制；推荐用外层容器 background + padding-box 或伪元素模拟渐变边框。
border-image 在 table 上基本不可用
直接给 table 或 td 加 border-image 几乎必然失败——不是没效果，就是边框错位、四角断裂、圆角失效，甚至整个表格渲染异常。原因很实在：border-image 依赖矩形边框的“切片拉伸”机制，而表格的边框模型（尤其是 border-collapse: collapse）会合并单元格边框，破坏 border-image 所需的独立边框上下文。
常见错误现象：
-
border-image写了但只显示纯色或空白 - 表格某几列有渐变，其他列消失
- 启用
border-radius后边框直接不渲染
实操建议：
- 放弃对
table元素本身使用border-image - 若必须用原生边框渐变，只考虑包裹
table的外层容器（如div），且该容器不能设overflow: hidden（否则裁切渐变） - 别在
th/td上单独设border-image——单元格边框是动态拼合的，无法稳定映射渐变图像
用 background + padding-box 模拟内嵌渐变边框
这是目前最稳、兼容性最好、且能精准控制粗细和圆角的方案。核心思路：把表格当“内容”，用外层容器画渐变，再通过留白和裁剪制造“边框感”。
立即学习“前端免费学习笔记（深入）”；
适用场景：需要统一外边框渐变（比如卡片式表格）、支持 border-radius、不干扰表格内部边框样式。
实操步骤：
- 给
table外层div设padding: 2px（即你想要的“边框宽度”） - 在同一
div上设置background: linear-gradient(90deg, #ff6b6b, #4ecdc4) - 加
background-clip: padding-box，确保渐变只出现在 padding 区域 - 设
border: 2px solid transparent（占位，防止 content-box 溢出） - 可选：加
border-radius: 8px，它会自然作用于这个容器
示例代码：
div.table-wrapper {
padding: 2px;
background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
background-clip: padding-box;
border: 2px solid transparent;
border-radius: 8px;
}
伪元素方案适配复杂表格结构
当表格需要响应式缩放、固定表头或滚动时，background-clip 方案可能因父容器尺寸变化导致渐变错位。此时用 ::before 伪元素更可控。
关键点在于层级与定位精度：
- 外层容器必须设
position: relative -
::before设position: absolute+inset: -2px（负值 = 边框宽度） -
::before的z-index必须低于表格内容（如z-index: -1） - 务必同步设置
border-radius: inherit，否则圆角会断开 - 如果表格有
overflow: auto，父容器需加overflow: hidden截断伪元素溢出
注意：伪元素方案在 IE11 及以下不支持 inset，需回退为 top/right/bottom/left: -2px。
outline + blur 仅适合静态展示表格
这个方案写起来最快，但本质是“模糊描边”，不是真实边框。它在表格上容易暴露两个硬伤：
-
outline不支持border-radius，圆角表格边缘会突兀地直角外扩 -
filter: blur()会让相邻单元格文字轻微发虚，尤其小字号时明显
只建议用于：
- 演示页面、后台管理页等对交互精度要求低的场景
- 表格整体禁用交互（如
pointer-events: none） - 边框宽度 ≥ 3px 且 blur 值 ≤ 2px，否则性能下降明显
别把它用在数据密集型表格上——滚动时频繁重绘会导致卡顿，Chrome DevTools 的 Rendering 面板会立刻标红。
真正让渐变边框“贴合表格”的难点不在写法，而在理解表格的边框模型本身就不支持图像化边框。所有可行方案都是绕过它，而不是征服它。选哪种，取决于你是否允许加一层 wrapper、能否接受伪元素带来的 DOM 复杂度、以及表格是否要被用户点击或聚焦。
