CSS border-image-repeat 属性

主题

定义和用法

border-image-repeat属性规定图像边框是否应该被重复（repeated）、拉伸（stretched）或铺满（rounded）。

border-image-repeat属性需要与border-image-source一起使用才有效果。

border-image-repeat属性round和space值在某些情况下可能看起来非常相似。

默认值：	stretch
继承性：	否
可动画性：	否。请参阅：可动画属性。
版本：	CSS3
JavaScript 语法：	object.style.borderImageRepeat="round"Demo ❯

下面通过演示实例，让你更直观地了解border-image-repeat属性的用法。

实例代码运行代码

复制

.example {
    border-image-source: url(border.png);
    border-image-repeat: repeat;
}

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

值	描述
`stretch`	图像会被拉伸以填满整个区域（默认值）。
`repeat`	图像会平铺（重复）以填满该区域。
`round`	图像会以平铺（重复）方式填满区域。如果无法用整数个完整图块填满区域，图像将自动缩放以适应。
`space`	图像会以平铺（重复）方式填充区域。如果无法用整数个完整图块填满区域，多余空间将均匀分布在各个图块周围。
`initial`	将此属性设置为其默认值。参阅 initial。
`inherit`	从其父元素继承此属性。参阅 inherit。