- HTML中文网
- 联系QQ：88526
- QQ交流群
- 微信公众号
前端控
更新时间：2019-03-22 14:34:31
border-image-repeat属性
含义：
border-image-repeat 属性用于图像边界是否应重复（repeated）、拉伸（stretched）或铺满（rounded）
浏览器支持：
| 属性 |  |  |  |  |  |
|---|---|---|---|---|---|
| border-image-repeat | 11.0 | 15.0 | 15.0 | 6.0 | 15.0 |
CSS语法：
border-image-repeat: stretch|repeat|round|initial|inherit;
注意：该属性规定如何延展和铺排边框图像的边缘和中间部分。因此，可以规定两个值。如果省略第二个值，则采取与第一个值相同的值
属性值：
| 值 | 描述 |
| stretch | 拉伸图像来填充区域，默认值 |
| repeat | 平铺（repeated）图像来填充区域 |
| round | 类似 repeat 值，如果无法完整平铺所有图像，则对图像进行缩放以适应区域 |
| space | 类似 repeat 值，如果无法完整平铺所有图像，扩展空间会分布在图像周围 |
| initial | 将此属性设置为默认值，查看 initial |
| inherit | 从父元素中继承该属性， 查看 inherit |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p{
border:15px solid;
padding: 30px;
border-image:url(images/kuang.jpg) 100;
}
.round{
border-image-repeat:round;
}
.repeat{
border-image-repeat:repeat;
}
.stretch{
border-image-repeat:stretch;
}
</style>
</head>
<body>
<p class="round">HTML中文网--round</p>
<p class="repeat">HTML中文网--repeat</p>
<p class="stretch">HTML中文网--stretch</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
效果图：
推荐手册