用 border-image 给表格加装饰性边框完全可行，但必须手动给 <table> 或 <tbody> 加显式 border 且设 border-collapse: separate，否则 collapse 会干扰渲染；还需配齐 border、border-image-source、border-image-slice 等最小必要属性。
直接说结论：用 border-image 给表格加装饰性边框完全可行，但必须手动给 <table> 或 <tbody> 加显式 border，且不能依赖默认边框行为——表格的 border-collapse 会干扰它。
为什么 table 元素上 border-image 容易失效
表格默认使用 border-collapse: collapse，这会让单元格边框合并，同时“吃掉”外层 <table> 的边框渲染通道。即使你写了 border-image，浏览器也常直接跳过渲染。
- 只给
<table>写border-image不生效？大概率是border-collapse: collapse在作祟 - 想让
border-image生效，必须先设border-collapse: separate（或干脆不设，让它 fallback 到默认 separate） - 更稳妥的做法是：把装饰边框套在包裹
<table>的<div>上，绕开表格自身渲染逻辑 - 如果坚持用在
<table>上，需额外加border-spacing: 0配合separate，否则可能留白缝
border-image 最小必要配置缺一不可
哪怕只差一个属性，border-image 就会静默退化为纯色边框（通常是 border-color 或透明），控制台也不报错，极难定位。
- 必须有显式
border声明：border: 20px solid transparent（solid不能省，transparent是安全底色） - 必须指定图像源：
border-image-source: url("frame.png")（注意路径可访问性，file://协议下跨文件会静默失败） - 必须定义切片：
border-image-slice: 30（数值单位是 px，写成30px反而无效） - 推荐加上
border-image-repeat: round，避免拉伸失真；stretch在表格宽高不定时极易糊边
图片素材与切片值怎么配才不出错
border-image-slice 不是越大越好，它按像素从原图四边向内裁，一旦任一方向切超了图尺寸，整个边框就 fallback 成纯色——没提示、不报错、只默默失效。
立即学习“前端免费学习笔记（深入）”；
- 用图片编辑器量清素材尺寸，比如
frame.png是 120×120px，那么border-image-slice: 30安全，border-image-slice: 65就可能崩 - 角部区域（左上、右上等）必须保留完整图案，切多了会把内容区误当边框，导致拼接错位
- 若图带透明内边距，切片值应略小于实际图案边界，否则角落会拉伸变形
- 小图建议转成 data URL 直接嵌入：
border-image-source: url("data:image/png;base64,iVBOR...")，避开跨域和路径问题
兼容性和 fallback 要提前想好
IE11 是最后一个支持 border-image 的 IE 版本，现代项目基本不用考虑，但 round 在旧 Safari（repeat 在非整数倍尺寸下容易露白缝。
- 始终提供
border-color作为降级：border: 20px solid #e0e0e0，确保无图时仍有可用边框 - 不要依赖 vendor prefix（如
-webkit-border-image），Chrome/Firefox/Edge 现代版本已原生支持标准语法 - 表格内容动态增删时，
border-image不会重绘——如果宽高变化大，建议用 JS 监听 resize 后强制重排（offsetHeight触发） - 真正麻烦的不是写法，而是设计稿给的边框图经常没标清楚九宫格切割线，开发时得自己试切、调值、截图比对
