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

列印頁面