背景:
Here是 W3C 规范定义 border-image-width 的方式。
Here MDN 如何解释 border-image-width。
Here是 W3C 规范定义 border-image-outset 的方式。
Here MDN 如何解释 border-image-outset。
我们都知道 border-image-width 的工作原理。它接受边界框并据此计算它的值。但是，当我们将它与 border-image-outset 一起使用时，它如何计算它的值，因为 border-image-outset 属性会更改边框图像区域以扩展到元素框区域之外。请看下图:(图片来自here)
声明:
以下示例向我们展示了 border-image-width 仍然根据边框外边缘的高度和宽度进行计算。(这没有意义，但无论如何)
使用的边框图像:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Border-image-width</title>
<style>
p.ShowingBorderImageOutsetExample1{
border: 3px solid black;
width:500px;
border-image-source: url("/image/BlCZO.png");
border-image-slice: 20%;
border-image-width: 1;
border-image-outset: 6px;
outline: 1px solid black;
}
p.ShowingBorderImageOutsetExample2{
border: 1px solid black;
width:500px;
border-image-source: url("/image/BlCZO.png");
border-image-slice: 20%;
border-image-width: 1;
border-image-outset: 6px;
outline: 1px solid black;
}
</style>
</head>
<body>
<p class="ShowingBorderImageOutsetExample1">Hi this is just a demo</p>
<p class="ShowingBorderImageOutsetExample2">Hi this is just a demo</p>
</body>
</html>如您所见，我们将 border-image-outset 和 border-image-width 保持不变。唯一发生变化的是 border-width，因为它发生了变化。这暗示 border-image-width 是根据 boder-width 计算的。
问题:
现在，虽然关于为什么 border-image-width 仍然在 border box 上计算似乎有点奇怪，但我的问题是它如何在扩展的新维度上调整那些 Angular 图像 block 、那些顶部宽度图像 block 等？
请注意，border-image-slice 为我们提供了片段，这些片段在 border-image-width 给定的尺寸上被拉伸(stretch)(默认)。但是由于使用了 border-image-outset，尺寸发生了变化。没有 body 拥有这些尺寸。 border-image-width 仍然依附于 border box 给定的尺寸。
最佳答案
border-image-width 的计算实际上并不依赖于border-image-outset。 Outset 只是指定一个偏移量，在该位置绘制边框图像并且对边框的宽度没有影响。
如规范中所述，当您为 border-image-width 属性使用纯数值(没有百分号或任何单位)时，计算出的宽度值是 边框宽度。
<number> Numbers represent multiples of the corresponding computed border-width.
(描述中的重点是我的)
因此，对于您的情况，第一个示例的 border-image-width 为 1*3px (= 3px)，第二个示例为 1*1px (= 1px)。这也是您从输出中看到的。边框图像第一个示例中的边框图像比第二个示例中的边框图像更厚。
border-image-outset 只是告诉 UA border-image 应该绘制在距元素原始边框 X 像素的偏移处. 偏移量在 元素的原始边框框之外，因为它是一个外边框。在您的情况下，它是元素的原始边框框的顶部、底部、左侧和右侧的偏移量 6px。因此，对于第一个示例，我们看到一个 3px 宽的边框和一个 3px 宽的间隙(因为一开始总共是 6px)，而对于第二个示例，我们看到 1px 宽的边框和一个 5px 宽的间隙(同样一开始是 6px总计)。
评论中的讨论总结:
正如您正确指出的那样，一旦添加了 outset，外部矩形(由 outset 创建的矩形)的尺寸将大于内部矩形的尺寸(原始的 border-box元素)，但这不会导致 border-image-width 尺寸的任何增加。 border-image-width 只是定义了 border-image 的thickness(实际上这种措辞差异有时也会引起误解) 并且无论边框是围绕内部矩形(原始 border-box)还是外部矩形(偏移框)绘制的，厚度都保持不变。
实际发生的是用于边框的图像 (border-image-source) 根据 border-image-slice 被分割成几 block 属性，然后根据 border-image-width 将各个部分首先放置在 4 个 Angular 上。然后，位于中心的剩余部分将根据 border-image-repeat 设置(round/space/repeat)进行填充。没有。中间的 block 数将比正常情况多，因为偏移的外部矩形在顶部和底部更宽，而在右侧和左侧更高。
这可以通过查看 first example that is available under the border-image section in the specs 来理解。 :
关于html - 使用 border-image-outset 计算 border-image-width，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42305824/