border-image 用于将图像添加到边框。语法：
border-image: source slice width outset repeat|initial|inherit;border-image-source | 用于指定要用于绘制边框的图像的位置 |
border-image-slice | 规定图像边框的向内偏移。 |
border-image-width | 规定图像边框的宽度。 |
border-image-outset | 规定边框图像超过边框盒的量。 |
border-image-repeat | 用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。 |
添加CSS3边框图像
<html>
<head>
<title>可视化大屏</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#round {
border: 10px solid transparent;
margin: 300;
width: 600px;
height: 500px;
background-image: linear-gradient(rgba(33, 204, 251, 0.3), rgba(33, 204, 251, 0.9), rgba(33, 204, 251, 0.3));
border-image: url(img/45.png) 8 stretch;
/* border-image-slice: 40 15 15 15; */
/* border-image-repeat: stretch; */
}
</style>
</head>
<body>
<div id="round">在这里，图片铺满整个边框。</div>
</body>
</html>边框图片：
最终效果：
