首页 文章

css中的border-image-width

提问于
浏览 次
3

这就是MDN解释border-image-width的方式 .

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

它没有说明如果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>

使用的边界图像是：

enter image description here

结果是：

enter image description here

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

html css

1 回答

  • 3

    使用边框图像而不是“普通”边框：

    来源：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>

    边框覆盖文字：
    border covering text

    回复于

相关问题