Question

border-image-outset属性描述了边框的数量图像区域延伸到边框之外。

我的理解

现在我的图像将覆盖区域边框图像开头+边框宽度+边框图像宽度。

但我的例子告诉我，我的理解是错误的。为简化起见，我没有定义任何border-image-width。我们将使用border-width + border-image-outset。但是，我们将使用outline shorthand属性来查看实际边框的位置。

使用的边框图片：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Border-image-width</title>
    <style>

        p.ShowingBorderImageOutsetExample{
            border: 1px solid black;
            width:500px;
            border-image-source: url("1.png");
            border-image-slice: 20%;
            border-image-outset: 6;
            outline: 1px solid black;
        }

    </style>
</head>
<body>
<p class="ShowingBorderImageOutsetExample">Hi this is just a demo</p>
</body>
</html>

输出如下：

黑线是轮廓。彩色线条是我们的图像边框。

问题是图像边框是否应该覆盖7px的宽度（6px的边框图像轮廓+ 1px的边框宽度），而它只覆盖输出中的1px？

Answer 1

border-image-outset属性描述了边框图像区域延伸到边框之外的数量，但未定义其大小， border-width / border-image-width就是这样做的。

对于border-image-width，它通过定义边界边缘的向内偏移来定义边框图像的宽度。如果border-image-width大于border-width，则边框图片会超出填充（和/或内容）边缘。

或者简单地说，border-image-outset定义边界应该延伸多远，border-width和border-image-width定义其大小（边框的宽度）。

由于你只给了边框大小为1px而没有border-image-width，这就是渲染的方式，如果你给它6px，并设置相同的开头，你就会得到这，首先是p。在第二个p中，一开始是12px，border-image-width设置为12px，它将一直渲染到轮廓。

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Border-image-width</title>
    <style>

        p.ShowingBorderImageOutsetExample{
            border: 6px solid black;
            width:500px;
            border-image-source: url("https://i.stack.imgur.com/syjY3.png");
            border-image-slice: 20%;
            border-image-outset: 6px;
            outline: 1px solid black;
            margin-left: 10px;
        }

        p.ShowingBorderImageOutsetExample2{
            border: 6px solid black;
            width:500px;
            border-image-source: url("https://i.stack.imgur.com/syjY3.png");
            border-image-slice: 20%;
            border-image-width: 12px;
            border-image-outset: 12px;
            outline: 1px solid black;
            margin-left: 10px;
        }

    </style>
</head>
<body>
<p class="ShowingBorderImageOutsetExample">Hi this is just a demo</p>
<p class="ShowingBorderImageOutsetExample2">Hi this is just a demo</p>
</body>
</html>

＆＃13;

CSS

1 个答案: