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 → 浏览器向下取整，可能切掉关键像素
最稳做法：用位图编辑器标好四条切割线，导出时保证切点落在整数像素上，然后写死像素值，不带单位。
