3
Here是规范如何W3C定义border-image-width。
Here是MDN如何解释border-image-width。
Here是规范如何定义W3C border-image-outset。
Here是MDN如何解释border-image-outset。
我们都知道border-image-width是如何工作的。它需要边框并根据它计算它的值。但是，当我们将它与边界图像开始一起使用时，它是如何计算它的价值的，因为边界图像 - 起始属性改变了边界图像区域以超出元素框区域。请看下图：（图片来自here拍摄）
声明：
下面的例子告诉我们，边框图像宽度仍然得到计算的高度和宽度边框的外边（无论如何都没有意义）
使用的边框图像：
<!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("https://i.stack.imgur.com/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("https://i.stack.imgur.com/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>正如你可以看到，我们一直保持边界图像，一开始就和边界图像宽度constant.Only事情的变化是由于发生改变边框宽度。这暗示边界图像宽度是根据boder-width计算的。
问：
不过，现在看来，为什么边框图像宽度仍然被计算在边界框有点怪异，我的问题是它如何再调整那些角落的图像片段，那些顶部宽度图像片等在扩展的新维度？
请注意，border-image-slices会给我们一些片段，并且这些片段会被border-image-width给定的尺寸拉伸（默认情况下）。但由于使用了边界图像开始，尺寸已经改变。没有任何人拥有这些尺寸。边框图像宽度仍然紧贴由边框指定的尺寸。
由于'边境image'性质是有点复杂的解释，我不知道，如果要交一个答案。这篇文章可能会提供一些启示，所以让我知道它是否使事情更加清晰：https://tympanus.net/codrops/css_reference/border-image-width/ – LGSon
@LGSon文章在上下文中没有提到边界图像开始。它只是解释了MDN中的正常工作。 –
明天我将发布一个答案（现在下午11点50分）......你在问题中有几句话是不准确的，当我们将这些问题排除后，我相信你会理解它是如何工作的 – LGSon