border-image对table元素无效，因其使用独立边框模型；需用div模拟表格结构并施加border-image，且必须完整配置border、border-image-source和border-image-slice。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

为什么直接给

加border-image基本无效

因为CSS规范明确限制border-image只对普通块级/行内元素生效，而table、td、tr等表格元素使用独立的边框渲染模型。border-image在它们身上会被浏览器静默忽略——不是写法错，是根本不走渲染通道。开发者工具里查computed样式，会发现所有border-image-*属性都是none或空值。

常见错误现象包括：写了border: 20px solid transparent + border-image-source + border-image-slice，但预览完全空白；把同样CSS复制到div上立刻生效；控制台零报错，网络面板也看不到图片请求。

想保留表格语义就得用div模拟结构

如果必须兼顾可访问性（如屏幕阅读器识别表头）、SEO或数据导出需求，又想要装饰性边框，唯一可靠路径是语义与样式分离：用div搭出视觉上的表格，再把border-image加在合法容器上。

• 外层套一个div class="table-wrapper"，设display: table或仅作装饰容器，真正加border-image的是这个wrapper
• 每个td换成div class="cell"，内部用display: table-cell保持对齐，边框效果加在.cell上（需确保它有border-width和border-style）
• 原生table不删，设visibility: hidden或position: absolute藏在底层，仅作语义支撑

border-image最小配置漏一不可

哪怕对象是合法的div，缺了任意一项，border-image都会静默退化为纯色边框——不是模糊、不是颜色错，而是彻底消失，且控制台不报错。

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

• border必须显式声明：border: 20px solid transparent（solid不能省，transparent是安全底色）
• border-image-source路径必须可访问：本地开发时file://协议易触发跨域限制，建议转成data URL测试
• border-image-slice值不能超图尺寸：比如frame.png是120×120px，border-image-slice: 40安全，border-image-slice: 80就可能退化
• border-image-slice: 30等价于30 30 30 30，写成30px会失效（单位不被支持）

round比stretch更适合艺术边框

对花边、徽章、手绘框这类装饰性图案，border-image-repeat: round比stretch更可靠。后者在宽高不定时极易拉糊边缘，尤其文字按钮附近；round会自动缩放平铺单元以填满边长，视觉稳定无撕裂。

注意border-image-repeat可四边单独设置，例如border-image-repeat: round space表示上下边用round，左右边用space。别默认写repeat——它会硬裁剪重复图块，若原始边框图未设计好接缝，角落就会露白缝或错位。

切片值和图片结构不匹配时，round能快速暴露问题：出现明显拉伸或断裂，说明border-image-slice和图中角部/边部区域没对齐。这时候该回图编辑器量清实际像素边界，而不是调CSS参数硬扛。