border-image-outset 对 元素基本无效，因浏览器不支持在表格上渲染边框图像；需通过外层 容器应用该属性才能生效。
直接说结论： border-image-outset 对 <table> 元素基本无效，不是你写错了，而是浏览器根本不支持在表格上渲染边框图像（包括 outset 行为）。<h3>为什么 table 上的 border-image-outset 不生效</h3>
<p>绝大多数浏览器（Chrome、Firefox、Safari 最新版）对 <code><table> 元素的 <code>border-image 系列属性（含 border-image-outset）完全忽略。原因在于：表格的边框模型是独立的（border-collapse），其渲染路径绕过了标准的 box border 绘制流程，border-image 依赖的底层机制无法介入。
常见错误现象：
– 写了 border-image-source + border-image-slice + border-image-outset，但只看到纯色边框或无边框
– DevTools 中能看到样式被解析，但 computed 样式里 border-image-outset 显示为 0 或不计算
– 换成 <div> 就立刻生效，确认代码本身没问题<h3>真正能用 border-image-outset 的替代方案</h3>
<p>必须把边框图像逻辑转移到容器级元素上，而非表格本身：</p>
<ul><li>给 <code><table> 外层套一个 <code><div class="table-wrapper">，对这个 <code><div> 应用 <code>border-image 和 border-image-outset
<table> 自身设为 <code>border: none，并确保 margin / padding 不干扰外层边框定位border 或 border-collapse 控制，它和外层 border-image 互不冲突示例关键 CSS：
`.table-wrapper {
display: inline-block; /* 避免 div 默认占满宽度 */
border: 20px solid transparent;
border-image-source: url("frame.png");
border-image-slice: 30;
border-image-width: 20px;
border-image-outset: 15px; /* 这里生效：图片向外扩展 15px */
padding: 10px;
}
<p>table {
border: none;
border-collapse: collapse;
}`</p>
border-image-outset 值设置的实操陷阱
border-image-outset 看似简单，但几个细节极易翻车：
- 值不能为负数 —— 写
border-image-outset: -5px会被浏览器静默丢弃，回退到0 - 单位敏感：写
15（无单位）代表15 × border-width；写15px才是绝对像素 —— 二者效果完全不同，别混用 - 多值简写顺序是「上 右 下 左」，但表格容器（
<div>）若设为 <code>display: table，部分旧引擎会错乱解析第四个值 - 如果
border-image-width是auto，border-image-outset的number值将失去参照基准，行为不可控
真正要让边框图片“扩展出去”，核心不是调 outset，而是先确保它跑在支持的元素上；表格天生不在支持名单里，绕不开这点。
