CSS - border-image-width 属性

CSS border-image-width 属性设置用作元素边框的图像的宽度。

语法

border-image-width: length | number | percentage | auto | initial | inherit;

属性值

值	描述
长度	它使用长度单位（例如 10px）指定边框的宽度。
数字	它表示边框宽度的倍数。默认值为 1。
百分比	它指的是边框图像区域的大小。
自动	它表示相应图像切片的内部宽度或高度。
初始	它将属性设置为其默认值。
继承	它从父元素继承属性。

CSS 边框图像宽度属性示例

以下示例使用不同的值解释了 border-image-width 属性。

带长度值的边框图像宽度

要设置边框图像的宽度，我们可以使用长度值（例如 10px、13px 等）指定边框宽度。在以下示例中，使用了不同的宽度值来突出显示差异。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
        .box{
                width: 200px;
                height: 200px;
                padding: 5px;
                border: 20px solid transparent;
                border-image-source: url(/css/images/border.png);
                border-image-slice: 33%;
                border-image-outset: 8px;
                margin-bottom: 45px;
        }
        .box1 {
                border-image-width: 15px;
        }
        .box2{
                border-image-width: 30px;
        }
   </style>
</head>
<body>
        <h2>
            CSS border-image-width property
        </h2>
        <div class=" box box1">
            <p>
                This box has a border-image-width of 15px
            </p>
        </div>
        <div class="box box2">
            <p>
                This box has a border-image-width of 30px
            </p>
        </div>
        <p>
            Image used:
        </p>
        <img src="/css/images/border.png" alt="border" height=150>
</body>
</html>

带数值的边框图像宽度

要设置边框图像的宽度，我们可以使用数值（例如 1、4、10 等）指定边框宽度，这些表示边框宽度的倍数。在以下示例中，使用了不同的宽度值来突出显示差异。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
        .box{
                width: 200px;
                height: 200px;
                padding: 30px;
                border: 20px solid transparent;
                border-image-source: url(/css/images/border.png);
                border-image-slice: 33%;
                border-image-outset: 8px;
                margin-bottom: 45px;
        }
        .box1 {
                border-image-width: 2;
        }
        .box2{
                border-image-width: 3;
        }
   </style>
</head>
<body>
        <h2>
            CSS border-image-width property
        </h2>
        <div class=" box box1">
            <p>
                This box has a border-image-width of 2
            </p>
        </div>
        <div class="box box2">
            <p>
                This box has a border-image-width of 3
            </p>
        </div>
        <p>
            Image used:
        </p>
        <img src="/css/images/border.png" alt="border" height=150>
</body>
</html>

带百分比值的边框图像宽度

要设置边框图像的宽度，我们可以使用百分比值（例如 20%、33% 等）指定边框宽度。在以下示例中，使用了不同的宽度值来突出显示差异。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
        .box{
                width: 200px;
                height: 200px;
                padding:15px;
                border: 20px solid transparent;
                border-image-source: url(/css/images/border.png);
                border-image-slice: 33%;
                border-image-outset: 8px;
                margin-bottom:45px;
        }
        .box1 {
                border-image-width: 7%;
        }
        .box2{
                border-image-width: 15%;
        }
   </style>
</head>
<body>
        <h2>
            CSS border-image-width property
        </h2>
        <div class=" box box1">
            <p>
                This box has a border-image-width of 7%
            </p>
        </div>
        <div class="box box2">
            <p>
                This box has a border-image-width of 15%
            </p>
        </div>
        <p>
            Image used:
        </p>
        <img src="/css/images/border.png" alt="border" height=150>
</body>
</html>

带自动值的边框图像宽度

要让浏览器根据图像和元素的尺寸决定边框的宽度，我们使用 auto 值。在以下示例中，使用了 auto 值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .border-image-auto {
            padding: 30px;
            width: 200px;
            height: 200px;
            border: 10px solid transparent;
            border-image: url('/css/images/border.png')
                          30 stretch;
            border-image-width: auto;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-image-width property
    </h2>
    <div class="border-image-auto">
        <p>
            border-image-width property with auto value
        </p>
    </div>
    <p>
        image used:
    </p>
    <img src="/css/images/border.png" alt="border" height=150>
</body>

</html>

支持的浏览器

属性
border-image-width	15.0	11.0	13.0	6.0	15.0

css_properties_reference.htm

打印页面