border-image对table不生效，因默认border-collapse:collapse使边框由单元格拼合，九宫格逻辑失效；须设border-collapse:separate并显式声明border-width，或改用外层div包裹实现。
border-image 为什么对 table 不生效
直接给 <table> 元素写 border-image 大概率没反应——不是语法错，而是表格的边框渲染机制和普通块级元素不同。浏览器默认启用 border-collapse: collapse（尤其在有 <td> 内容时），此时表格边框由单元格共同“拼合”而成，border-image 的九宫格逻辑无法绑定到单一 border 区域上。
常见错误现象：border: 20px solid transparent + border-image 写在 <table> 上，控制台无报错，但边框始终是透明或 fallback 颜色。
- 必须显式设
border-collapse: separate，禁用合并模式 - 同时确保
<table>自身有明确的border-width（不能靠<td>推导） - 若用了
border-collapse: collapse，改用<div>包裹<table>，把border-image放在外层容器上更可靠
table 边框图片的切图尺寸怎么配
表格边框是“外框”，只涉及四条外边线，不包括内部单元格分隔线。所以你不需要为“内边”预留切图区域，border-image-slice 只需按外边框所需宽度切图即可。
例如：一张 frame.png 是 120×120px，四个角各占 30px，上下/左右边区域各宽 30px → 安全的 border-image-slice 值就是 30（等价于 30 30 30 30）。
立即学习“前端免费学习笔记（深入）”；
- 切图值必须 ≤ 图片对应方向尺寸；图高 50px 却写
border-image-slice: 60，整个边框退化为纯色，且无任何提示 - 不要混用单位：
border-image-slice: 30px会失效，必须写30 - 图带 1px 白边或抗锯齿毛边？实际有效像素可能只有 118×118，slice 值建议下调 1–2
border-image-width 和 border-width 必须协同设置
border-width 定义边框“结构通道”，border-image-width 控制图片“视觉厚度”。两者不一致时容易出问题：比如 border: 20px solid transparent 但 border-image-width: 30px，图片会溢出或被裁剪。
- 推荐保持一致：
border: 30px solid transparent+border-image-width: 30px - 省略
border-image-width时，浏览器回退使用border-width值，但若图中角区域是 30×30px，而border-width是 25px，角图会被压缩变形 - 如果表格内容多、需要留白，可用
border-image-outset: 5px把图片边框往外推，避免压住文字
本地开发时图片不显示的静默失败原因
写好所有属性，预览却只见空白边框？大概率卡在这三处之一：
-
file://协议下加载本地 PNG：浏览器拦截跨源请求，Network 面板能看到net::ERR_FAILED，但控制台不报错 - 路径写错或 404：
border-image-source: url("img/frame.png")实际文件在assets/frame.png - 图片本身跨域且服务端没配 CORS：换成 data URL 最快验证，小图可直接嵌入：
border-image-source: url("data:image/png;base64,iVBORw...");
真正难调的永远不是 CSS 写法，而是那张图的像素边界在哪、导出时有没有自动加白边、PS 里是否关了“对齐像素”——差 1px，border-image-slice 就可能漏掉一角。
