border-image 在 table 及其子元素上不生效，因 css 规范限制其仅适用于普通块级/行内元素；替代方案是用 div 模拟表格结构并应用 border-image。
border-image 在 table 元素上根本不会生效
直接给 <table> 或 <code><td> 加 <code>border-image，99% 的情况边框不显示——不是写法错，而是浏览器根本不支持。CSS 规范明确限制：border-image 只对 普通块级/行内元素（如 div、p、button）有效，而表格相关元素（table、tr、td、th）的边框渲染机制完全不同，border-image 属性会被静默忽略，控制台零报错。
常见错误现象：
- 写了
border: 10px solid transparent+border-image-source+border-image-slice，预览空白 - 用开发者工具检查 computed 样式，发现
border-image相关属性全为none或空值 - 把同样 CSS 复制到
<div> 上立刻生效，反向验证了 table 的兼容性限制 <h3>替代方案：用 div 模拟表格结构再套 border-image</h3> <p>想用图片边框又必须保持表格语义或布局逻辑？唯一可靠路径是「语义与样式分离」：用 <code><div> 搭出表格视觉结构，再在其外层容器或单元格级 <code><div> 上应用 <code>border-image。实操建议：
- 外层包裹一个
<div class="table-wrapper">，设 <code>display: table或仅作装饰容器；真正加border-image的是这个 wrapper - 每个
<td> 替换为 <code><div class="cell">，内部用 <code>display: table-cell保持对齐，边框效果加在.cell上（需确保它有明确border-width和border-style） - 若需保留原生
<table> 用于可访问性或 SEO，可将其 <code>visibility: hidden或position: absolute藏在底层，仅用 div 层做视觉呈现border-image 最小必要配置缺一不可
即使对象是合法元素（如
<div>），漏掉任意一项都会导致图片边框完全不渲染——不是模糊、不是颜色错，而是彻底消失。 <p>必须同时存在：</p> <ul> <li> <code>border-width（如20px）+border-style（如solid），写成border: 20px solid transparent最稳妥；border: none或border: 20px（缺 style）直接失效 -
border-image-source: url("frame.png")，路径必须可访问；本地开发用file://协议时，跨域限制会让图片静默加载失败，建议转 data URL 测试 -
border-image-slice值不能超图尺寸，例如 120×120px 图片，border-image-slice: 40安全，border-image-slice: 80就可能退化为纯色 fallback
注意：
border-image-slice: 30等价于30 30 30 30，不是“只设上边”；写成border-image-slice: 30px（带单位）会失效。border-image-repeat 选 round 而非 stretch
对大多数装饰性边框（花边、徽章、手绘框），
border-image-repeat: round是更安全的选择。它会自动缩放切片单元以整数倍铺满边长，避免拉伸失真和拼接缝隙。慎用
stretch：- 文字按钮旁的边框容易被横向拉糊，细节丢失
- 当元素宽高频繁变化（如响应式 resize）时，每次重绘都可能产生不同拉伸比例，视觉不稳定
- 若图片本身分辨率不足，
stretch会放大像素点，出现明显马赛克
示例：推荐写法
实际应用中最容易被忽略的，是表格元素对border-image: url("frame.png") 30 round / 20px，其中/ 20px是border-image-width的简写，确保图片区域厚度与结构宽度一致。border-image的硬性屏蔽——这不是 bug，是规范限定。想绕过，只能换容器，没有捷径。 - 外层包裹一个
