小编给大家分享一下css中的border-image-repeat属性怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
CSS3border-image-repeat属性
作用：规定图像边框是否应该被重复（repeated）、拉伸（stretched）或铺满（rounded）。
语法：
border-image-repeat:stretch|repeat|round|space;
stretch：表示拉伸图像来填充区域
repeat：表示平铺（重复）图像来填充区域。
round：类似repeat值；如果无法完整平铺所有图像，则对图像进行缩放以适应区域。
space：类似repeat值。如果无法完整平铺所有图像，扩展空间会分布在图像周围
说明：border-image-repeat属性规定如何延展和铺排边框图像的边缘和中间部分。因此，您可以规定两个值。如果省略第二个值，则采取与第一个值相同的值。
注：InternetExplorer10,Opera12和Safari5不支持border-image-repeat属性。
CSS3border-image-repeat属性的使用示例
<!DOCTYPEhtml>
<html>
<head>
<style>
div{
margin:50px;
border:30pxsolidtransparent;
border-image:url('https://img.php.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>
<divclass="round">
DIV使用图像边框--round
</div>
<divclass="repeat">
DIV使用图像边框--repeat
</div>
<divclass="stretc">
DIV使用图像边框--stretc
</div>
</body>
</html>
以上是“css中的border-image-repeat属性怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
