CSS 属性

CSS border-image-repeat 属性指定边框图像是否应重复、圆角、间隔或拉伸。默认值为拉伸。

属性值

  • stretch - 拉伸图像以填充边框区域。这是默认值。

  • repeat: 重复图像以填充该区域。

  • round: 其结果是重复图像（图块）来填充该区域，如果整个图像未填满，则重新缩放图像。

  • space: 这会导致图像重复（图块）来填充该区域，如果整个图像没有填满，则额外的空间分布在图块周围。

  • initial: 它将默认值设置为属性.

  • inherit: 从父元素继承属性。

适用范围

所有 HTML 元素。

DOM 语法

object.style.borderImageRepeat = "repeat|space|round|stretch";

示例

这里是显示此属性效果的示例 -

<html>
<head>
   <style>
   .box1 {

            border: 20px solid;
            border-image-source: url(/css/images/border.png);
            border-image-slice: 33%;
            border-image-repeat: stretch ;
        }
     .box2 {
            border: 20px solid;
            border-image-source: url(/css/images/border.png);
            border-image-slice: 33%;
            border-image-repeat: repeat;
        }
        .box3 {
            border: 20px solid;
            border-image-source: url(/css/images/border.png);
            border-image-slice: 33%;
            border-image-repeat: round;
        }
        .box4 {
            border: 20px solid;
            border-image-source: url(/css/images/border.png);
            border-image-slice: 33%;
            border-image-repeat: space;
        }
   </style>
</head>
<body>
        <p class="box1">border-image-repeat with value stretch</p>
        <p class="box2">border-image-repeat with value repeat</p>
        <p class="box3">border-image-repeat with value round</p>
        <p class="box4">border-image-repeat with value space</p>
</body>
</html>