Question

这就是MDN解释border-image-width的方法。

border-image-width CSS属性定义边框的宽度图像通过定义边界边缘的内向偏移量。如果 border-image-width大于border-width，然后是border 图像延伸到填充（和/或内容）边缘之外。

它没有说明如果border-image-width小于border-width会发生什么？

我做了一个例子。把它放在chrome 56上。这是代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Border Image</title>
    <style>
        p.checkBorderImageWidth{
            border: 40px solid black;
            width:500px;
            border-image-source: url("1.png");
            /* Note that now border-image-slice defaults to 100% */
            border-image-width: 10px;
            outline: 1px solid black;
        }

    </style>
</head>

<body>
    <p class="checkBorderImageWidth">Hi this is just a demo</p>
</body>

</html>

使用的边框图像是：

结果是：

所以，正如您所看到的那样，虽然它是40px并且boder-image-width是10px，但是隐藏了纯黑色边框。有人能解释一下吗？

Answer 1

使用边框图像代替“普通”边框：

来源：https://www.w3schools.com/cssref/css3_pr_border-image.asp

border-image属性允许您指定要在元素周围使用而不是的正常边框的图像。

您的引文解释说，如果border-image-width > border-width，边框图像将覆盖填充并最终覆盖容器的内容。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Border Image</title>
    <style>
        p.checkBorderImageWidth{
            border: 40px solid black;
            width:500px;
            border-image-source: url("1.png");
            /* Note that now border-image-slice defaults to 100% */
            border-image-width: 10px;
            outline: 1px solid black;
        }

        p.checkBorderImageWidth2{
            border: 100px solid black;
            width:500px;
            border-image-source: url("1.png");
            /* Note that now border-image-slice defaults to 100% */
            border-image-width: 30px;
            padding: 5px;
            outline: 1px solid black;
    }

    </style>
</head>

<body>
    <p class="checkBorderImageWidth">Hi this is just a demo</p>
    <p class="checkBorderImageWidth2">The border covers the text.</p>
</body>

</html>

这里的边框涵盖了文字：

css

1 个答案: