table 的 border 不能直接用 linear-gradient 是因为 border-color 只支持单色值，不支持渐变函数；必须用 border-image 或伪元素模拟，前者需 border-collapse: separate 且注意兼容性，后者更可控但增加 dom 复杂度。
表格边框本身不支持直接用 linear-gradient 上色，必须绕过 border 属性，改用 border-image 或伪元素模拟。
为什么 table 的 border 不能直接写 linear-gradient？
CSS 的 border-color 只接受单色值（#fff、rgb()、transparent 等），不支持函数或渐变。你写 border: 2px solid linear-gradient(...) 会直接被浏览器忽略，边框消失或回退为默认色。
真正生效的渐变边框，本质是把渐变“当图像用”，靠 border-image 把它贴到边框区域上。
table 元素上用 border-image 实现渐变边框
注意：这个方法只对设置了 border-collapse: separate 的表格有效；collapse 模式下单元格边框合并，border-image 无法稳定控制。
- 给
<table> 设置固定边框宽度，比如 <code>border: 3px solid transparent - 用
border-image-source指向渐变：linear-gradient(to right, #ff6b6b, #4ecdc4) - 必须设
border-image-slice: 1，否则渐变会被裁掉或拉伸变形 - 如果表格有内边距或需要统一外边框，建议只作用于
<table>，不要套在 <code><td> 上——否则每个单元格都渲染一次渐变，性能差且易错位 <p>示例：</p> <pre class="brush:php;toolbar:false;">.gradient-table { border: 3px solid transparent; border-image-source: linear-gradient(to right, #ff6b6b, #4ecdc4); border-image-slice: 1; border-collapse: separate; }</pre> <h3>用伪元素 + background-image 模拟更可控的边框</h3> <p>当 <code>border-image在复杂表格（如带colspan/rowspan）中表现异常时，更稳妥的做法是放弃原生边框，用::before绝对定位一层渐变“边框”。- 给
<table> 设 <code>position: relative - 伪元素宽高 = 表格宽高 + 边框厚度 × 2，
top: -3px、left: -3px - 用
background-image: linear-gradient(...)+background-size控制方向和粗细（例如background-size: 100% 3px表示水平渐变、3px 高） - 若要四边都有渐变，需四个伪元素分别控制上下左右，或用多层
background+background-position
关键点：伪元素方案完全绕过浏览器对表格边框的特殊处理逻辑，兼容性更好，也方便加圆角、阴影等效果。
容易被忽略的兼容性和细节
border-image在 Safari 15.4+ 和 Chrome 110+ 表现稳定，但旧版 iOS Safari 对border-image-slice: 1解析偶尔出错，建议加-webkit-border-image前缀并测试真机。表格行/列边框想单独渐变？不行。CSS 不允许对
<tr> 或 <code><td> 单独应用 <code>border-image（部分浏览器会忽略）。真有这种需求，只能用伪元素逐个包裹<td>，代价是 DOM 膨胀和重排开销上升。 <p>最后提醒：渐变边框不是纯装饰——它会让表格失去“语义边框”的可访问性提示（如屏幕阅读器识别），必要时得补上 <code>aria-label或视觉 fallback。 - 给
