表格边框无法直接用border-color设渐变，因其仅支持单色；应使用background+background-clip:padding-box模拟，或伪元素::before实现圆角渐变边框。
表格边框不能直接用 border-color 设渐变
HTML 表格的 border-color 只接受单色值，写 linear-gradient() 会完全失效——浏览器直接忽略整条声明，退回到默认或继承色。这不是语法错误，而是 CSS 规范限制：border-color 的取值类型是 <color>，而渐变属于 <image> 类型。
所以别在 <table> 或 <td> 上试 border: 2px solid linear-gradient(...)，它永远不生效。
- 常见错误现象：
border看起来“没颜色”或显示为黑色/透明，其实是被静默丢弃了 - 真正能承载渐变的属性只有三个：
background-image、border-image、伪元素::before -
border-image虽原生支持渐变，但表格单元格（<td>）上兼容性极差：IE 完全不认，旧 Safari 渲染错位，且和border-collapse: collapse冲突
安全做法：用 background + background-clip: padding-box 模拟边框
这是目前最稳、最可控、兼容到 IE10+ 的方案。核心思路是：把渐变画在背景里，再用 background-clip 把它“卡”在内边距区域，视觉上就是一条渐变边框。
关键配置必须同时满足：
立即学习“前端免费学习笔记（深入）”；
-
border: 2px solid transparent—— 占位但不可见，防止降级时塌陷 -
padding: 2px—— 留出“边框”空间，宽度要和border-width一致 -
background: linear-gradient(90deg, #ff6b6b, #4ecdc4)—— 渐变方向建议用90deg或to right，避免斜向在小单元格里重复错位 -
background-clip: padding-box—— 强制渐变只渲染在 padding 区，不侵入内容也不溢出到 border 外
示例代码：
td {
border: 2px solid transparent;
padding: 2px;
background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
background-clip: padding-box;
}
<tr> 上设渐变边框会出问题
很多开发者想给整行加边框效果，直接在 <tr> 上写 background-image 或 border-image。但 <tr> 是个“非盒模型元素”——它没有自己的 padding、margin、甚至 width/height 在多数浏览器中不可控。结果就是渐变位置飘忽、高度塌陷、或被相邻 <td> 覆盖。
更麻烦的是：<tr> 的 background 渲染行为在 Chrome/Firefox/Safari 中差异极大，尤其在 border-collapse: collapse 下几乎无法预测。
- 安全做法：所有渐变逻辑都落在
<td>上，哪怕要模拟“整行边框”，也靠统一设置每个<td>的左右边渐变来拼接 - 如果需要顶部/底部边框效果，给首行/末行的
<td>单独加border-top/border-bottom模拟，别依赖<tr> - 绝对不要给
<tr>设border-radius或overflow: hidden，这会让整个表格布局失控
圆角表格 + 渐变边框只能靠伪元素
一旦表格或单元格需要 border-radius，background-clip: padding-box 就会失效——圆角裁剪发生在 border box 层，而渐变已被限制在 padding box 内，结果是圆角处留白或颜色断裂。
此时唯一可靠方案是用伪元素 ::before 盖一层渐变矩形：
- 给
<td>设position: relative和border-radius -
::before设content: ""、position: absolute、inset: -2px（负值等于边框厚度） -
::before用background: linear-gradient()并继承border-radius - 主
<td>的背景设为纯色或透明，避免遮挡
注意：inset: -2px 是关键，它决定了伪元素比原单元格大多少；若表格有 border-collapse: collapse，需先改为 separate 并设 border-spacing: 0，否则伪元素会被挤压错位。
