用 border-image 给表格加装饰性边框完全可行，但必须手动给 或 加显式 border 且设 border-collapse: separate，否则 collapse 会干扰渲染；还需配齐 border、border-image-source、border-image-slice 等最小必要属性。

直接说结论：用 border-image 给表格加装饰性边框完全可行，但必须手动给 <table> 或 <code><tbody> 加显式 <code>border，且不能依赖默认边框行为——表格的 border-collapse 会干扰它。

为什么 table 元素上 border-image 容易失效

表格默认使用 border-collapse: collapse，这会让单元格边框合并，同时“吃掉”外层 <table> 的边框渲染通道。即使你写了 <code>border-image，浏览器也常直接跳过渲染。

• 只给 <table> 写 <code>border-image 不生效？大概率是 border-collapse: collapse 在作祟
• 想让 border-image 生效，必须先设 border-collapse: separate（或干脆不设，让它 fallback 到默认 separate）
• 更稳妥的做法是：把装饰边框套在包裹 <table> 的 <code><div> 上，绕开表格自身渲染逻辑 <li>如果坚持用在 <code><table> 上，需额外加 <code>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 成纯色——没提示、不报错、只默默失效。

  

  html-to-pptx

  将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

  下载
  • 用图片编辑器量清素材尺寸，比如 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 触发）
  • 真正麻烦的不是写法，而是设计稿给的边框图经常没标清楚九宫格切割线，开发时得自己试切、调值、截图比对