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

打印页面