Question

背景：

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("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>

正如您所看到的那样，我们已将border-image-outset和border-image-width保持为常量。由于发生了哪种更改，因此只会更改边框宽度。这暗示border-image-width是在boder-width上计算的。

问题：

现在，虽然看起来为什么边框图像宽度仍然在边框上计算似乎有点奇怪，但我的问题是它如何在扩展的新尺寸上调整那些角落图像片段，顶部宽度图像片段等？

请注意，border-image-slice为我们提供了碎片，并且这些碎片在border-image-width给出的尺寸上被拉伸（默认情况下）。但是由于边界图像开始的使用，尺寸已经改变。没有身体拥有这些尺寸。边框图像宽度仍然贴在边框框给出的尺寸上。

Answer 1

border-image-width的计算实际上并不依赖于border-image-outset。只有 指定一个偏移 ，在该偏移处应绘制边框图像，并且不会影响边框的宽度。

如规范中所述，当您为border-image-width属性使用纯数值（没有百分号或任何单位）时，计算出的宽度值是border-width的倍数。

<强>＆LT;数＆GT; 数字代表 相应计算边框宽度的倍数。

^{（说明中的重点是我的）}

因此，对于您的情况，第一个示例的border-image-width为1 * 3px（= 3px），第二个示例为{* 1px（= 1px）。这也是你从输出中看到的。第一个示例中的边框图像比第二个图像中的 更厚。

border-image-outset只是告诉UA border-image应该在距离元素原始边框的X像素偏移处绘制。 偏移位于 元素的原始边框之外，因为它是一个初始边框。在您的情况下，它偏移6px到元素的原始边框的顶部，底部，左侧和右侧。因此，对于第一个示例，我们看到3px宽边框和3px宽间隙（总体开始时间为6px），而对于第二个示例，我们看到1px宽边框和5px宽间隙（再次作为开始是6px总计）。

评论中的讨论摘要：

正如你正确指出的那样，一旦添加了一个开头，外部矩形的尺寸（由一开始创建的尺寸）将大于内部矩形（元素的原始border-box）的尺寸，但是不会导致border-image-width的尺寸增加。 border-image-width只定义了边框图像的厚度（实际上，措辞差异也可能是造成误解的原因）并且厚度保持不变无论边框是围绕内部矩形（原始border-box）还是外部矩形（偏移框）绘制的。

实际发生的是，用于边框的图像（border-image-source）会根据border-image-slice属性切成碎片，然后首先将各个碎片放在4个角落在border-image-width上。然后，将基于border-image-repeat设置（圆形/空格/重复）填充位于中心的剩余部分。没有。中间的碎片比平常更多，因为偏移的外部矩形在顶部和底部较宽，而在右侧和左侧较高。

通过查看first example that is available under the border-image section in the specs：
可以了解这一点

使用border-image-outset计算边框图像宽度

1 个答案: