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