CSS - border-image-repeat 屬性

CSS border-image-repeat 屬性指定邊框影像是否應該重複、圓形、間隔或拉伸以填充邊框區域。預設值為stretched。

語法

border-image-repeat: stretch | repeat | round | space | initial | inherit;

屬性值

值	描述
stretch	邊框影像被拉伸以填充整個邊框區域。預設值。
repeat	影像被重複或平鋪以填充整個邊框區域。
round	影像被重複或平鋪以填充整個邊框區域。如果影像沒有填滿，則影像會被重新縮放。
space	影像被重複或平鋪以填充整個邊框區域。如果影像沒有填滿，則額外的空間會在平鋪周圍重新分配。
initial	這將屬性設定為其預設值。
inherit	這將從父元素繼承屬性。

CSS 邊框影像重複屬性示例

以下示例解釋了使用不同值的border-image-repeat 屬性。

使用 stretch 值的邊框影像重複屬性

為了讓邊框影像拉伸以填充邊框區域，我們使用 stretch 值。在下面的示例中，使用了 stretch 值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            padding: 20px;
        }

        .box1 {
            border: 20px solid;
            border-image-source: url(/css/images/border.png);
            border-image-slice: 33%;
            border-image-repeat: stretch;
        }
    </style>
</head>

<body>
    <h2>CSS border-image-repeat property</h2>
    <p class="box1">border-image-repeat 
    with value stretch: stretches the image 
    to fit the space.</p>
    <p>Image used:</p>
    <img src="/css/images/border.png" 
    alt="solid image" height=100>
</body>

</html>

使用 repeat 值的邊框影像重複屬性

為了讓邊框影像重複以填充邊框區域，我們使用 repeat 值。在下面的示例中，使用了 repeat 值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            padding: 20px;
        }

        .box1 {

            border: 20px solid;
            border-image-source: url(/css/images/border.png);
            border-image-slice: 33%;
            border-image-repeat: repeat;
        }
    </style>
</head>

<body>
    <h2>CSS border-image-repeat property</h2>
    <p class="box1">border-image-repeat 
    with value repeat: The image is repeated to
    fill the space.</p>
    <p>Image used:</p>
    <img src="/css/images/border.png" 
    alt="solid image" height=100>
</body>

</html>

使用 round 值的邊框影像重複屬性

為了讓邊框影像重複以填充邊框區域，如果整個空間沒有填滿，則影像會被調整大小，我們使用 round 值。在下面的示例中，使用了 round 值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            padding: 20px;
        }

        .box1 {

            border: 20px solid;
            border-image-source: url(/css/images/border.png);
            border-image-slice: 33%;
            border-image-repeat: round;
        }
    </style>
</head>

<body>
    <h2>CSS border-image-repeat property</h2>
    <p class="box1">border-image-repeat 
    with value round: The image is repeated to 
    fill the space, image is resized if space 
    is not filled.</p>
    <p>Image used:</p>
    <img src="/css/images/border.png" 
    alt="solid image" height=100>
</body>

</html>

使用 space 值的邊框影像重複屬性

為了讓邊框影像重複以填充邊框區域，如果整個空間沒有填滿，則空間會在平鋪周圍重新分配，我們使用 space 值。在下面的示例中，使用了 space 值。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            padding: 20px;
        }

        .box1 {

            border: 20px solid;
            border-image-source: url(/css/images/border.png);
            border-image-slice: 33%;
            border-image-repeat: space;
        }
    </style>
</head>

<body>
    <h2>CSS border-image-repeat property</h2>
    <p class="box1">border-image-repeat 
    with value space: The image is repeated to 
    fill the space, space is redistributed if 
    space is not filled.</p>
    <p>Image used:</p>
    <img src="/css/images/border.png" 
    alt="solid image" height=100>
</body>

</html>

支援的瀏覽器

屬性
border-image-repeat	15.0	11.0	15.0	6.0	15.0

css_properties_reference.htm

列印頁面