怎么在HTML表格中用border-image-slice切分表格边框背景图

border-image-slice 在 table 元素上无效，因浏览器规范不支持表格边框使用 border-image；需用外层 div 包裹模拟，切图值须 ≤ 源图尺寸且为无单位整数。

border-image-slice 在 table 元素上根本不起作用

直接给 <table> 或 <td> 设置 border-image 大概率白忙活——浏览器对表格元素的边框渲染有特殊限制，border-image 在绝大多数现代浏览器中被忽略或部分失效。这不是你 slice 值写错了，而是规范层面不支持。

为什么 table 的 border-image 会静默失败

表格边框涉及 border-collapse（尤其是 collapse 模式）、单元格合并、边框优先级计算等复杂逻辑，border-image 无法可靠介入这个渲染链。即使你写了完整的配置：border: 2px solid transparent + border-image-source + border-image-slice: 30，结果也常常是 fallback 到纯色边框，控制台不报错，Network 面板也看不出异常。

• border-collapse: collapse 下，相邻边框会被合并，border-image 无从定位“自己的边框区域”
• <th> 和 <td> 的边框由表格模型统一调度，不响应独立的 border-image 声明
• Safari 和 Firefox 对表格元素的 border-image 支持几乎为零；Chrome 表现不稳定，缩放或重绘后常丢失

真正能用 border-image-slice 的替代方案

想让表格“看起来”有图案边框，得绕开表格原生边框，用包裹容器模拟：

• 给 <table> 外层套一个 <div class="table-wrapper">
• 在 wrapper 上设 border: 16px solid transparent + border-image-source + border-image-slice: 16 + border-image-width: 16px + border-image-repeat: round
• 确保 wrapper 有 display: inline-block 或固定宽高，避免边框塌陷
• table 本身设 border: none，靠 wrapper 承担视觉边框

示例关键 CSS：

立即学习“前端免费学习笔记（深入）”；

`.table-wrapper {  border: 16px solid transparent;  border-image: url("frame-80x80.png") 16 round / 16px;  display: inline-block;}table { border: none; margin: 0; }`

切图值填多少才安全

border-image-slice 值必须 ≤ 源图对应方向尺寸，且单位只能是无单位数字（30 合法，30px 无效）。对表格边框这种间接应用，更要保守：

• 先用图像编辑器量出 frame-80x80.png 是 80×80px → 最大安全 border-image-slice 是 40（留余量防抗锯齿偏移）
• 若图是 120×60px（宽高不等），则 border-image-slice: 30 60 30 60 会失败——右边/左边切线超出图宽，整个边框退化为纯色
• 别信“百分比更灵活”：比如 border-image-slice: 25% 在 80×80 图上是 20px，但若图实际是 79×79，25% 就约等于 19.75px → 浏览器向下取整，可能切掉关键像素

最稳做法：用位图编辑器标好四条切割线，导出时保证切点落在整数像素上，然后写死像素值，不带单位。