CSS中的border-image-width

编号945

这就是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> 

使用的边框图像为:

在此处输入图片说明

结果是:

在此处输入图片说明

因此,如您所见,虽然实心黑色边框为40px,而boder-image-width为10px,但它是隐藏的。有人可以解释吗?

西尔万

使用边框图像代替“正常”边框:

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

这里的边框覆盖了文本: 边框覆盖文字

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

CSS 样式中 border 和 border-width 属性的区别

为什么border-image-width在border-image形式语法中出现两次?

具有border-image-outset的border-image-width的计算

仅在CSS中将image-height-div覆盖%-width

WordPress 4.4:从functions.php更改media.php中的max_srcset_image_width

width()和css(width)之间的区别

CSS \ 9 width属性

使用CSS和width

CSS / border-image / border-image-slice /造成很小的间隙,例如分隔线

如何使用 tf.summary.image() 按 [batch, channels, width, height] (NCHW) 顺序可视化张量板中的图像?

如何在子主题的functions.php中覆盖父主题的add_image_size和$ content_width

如何从image标签获取width和height属性?

使用self.image.width的Django模型方法性能

创建新图像时,image.width 返回 0

没有报告CSS错误,但border-image-source和border-image-slice不会产生任何边框图像

SystemVerilog中的随机WIDTH掩码

jquery 中 parseInt($(window).width()) 和 parseInt($(window).width) 的区别?

如何在CSS中做到width = 100%-100px?

用 html width 属性覆盖在 css 中声明的表格宽度

CSS:将width设置为parent的宽度

img标签上的CSS的width属性

在calc(css)中使用screen.width

图像css max-width的路径异常

CSS Width等于高度,反之亦然

在CSS中,“ width:fit-content;”之间有什么区别?和“ width:“ fit-content(some_value);”?

将尺寸为高度,宽度,通道数的图像转换为n_masks,image_height,image_width

ImageField image_width和image_height是否自动填充现有数据库?

在100%width div中向右填充

Rails image_tag width属性使用百分比/自动值?