border-image-repeat属性怎样用【html5教程】

border-image-repeat属性是用于指定图象边框是不是应被反复（repeated）、拉伸（stretched）或铺满（rounded）的。

CSS3 border-image-repeat属性

作用：划定图象边框是不是应该被反复（repeated）、拉伸（stretched）或铺满（rounded）。

语法：

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

stretch：示意拉伸图象来添补地区

repeat：示意平铺（反复）图象来添补地区。

round：相似 repeat 值；假如没法完全平铺一切图象，则对图象举行缩放以顺应地区。

space：相似 repeat 值。假如没法完全平铺一切图象，扩大空间会散布在图象四周

申明：border-image-repeat属性划定怎样延展和摆设边框图象的边沿和中心部份。因而，您能够划定两个值。假如省略第二个值，则采用与第一个值雷同的值。

注： Internet Explorer 10, Opera 12 和 Safari 5 不支持 border-image-repeat 属性。

CSS3 border-image-repeat属性的运用示例

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    margin:50px;
    border: 30px solid transparent;
    border-image: url('https://img.ki4.cn/upload/article/000/000/024/5c62637b1a4fe853.png');
    border-image-slice: 25;
    
}
.round{
    border-image-repeat: round;
}
.repeat{
    border-image-repeat: repeat;
}
.stretc{
    border-image-repeat: stretc;
}
</style>
</head>
<body>

<div class="round">
 DIV 运用图象边框--round
</div>
<div class="repeat">
 DIV 运用图象边框--repeat
</div>
<div class="stretc">
 DIV 运用图象边框--stretc
</div>
</body>
</html>

效果图：