效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/41a7507cba5590bf9ae69aaafb6bc4b3.png)
二、背景图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1083372773791c22de15310652cbe26a.png)
三、完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrap {
background-image: url(./backgroundImage.png);
background-repeat: no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
height: 100vh;
}
.panel {
position: relative;
width:35vh;
height: 20vh;
border: 1px solid rgba(25, 186, 139, 0.17);
padding: 0 15px 40px;
left:20px;
top:20px;
}
.bl::before {
position: absolute;
top: 0;
content: "";
left: 0;
height: 10px;
width: 10px;
border-top: 2px solid #02a6b5;
border-left: 2px solid #02a6b5;
}
.bl::after {
position: absolute;
top: 0;
content: "";
right: 0;
height: 10px;
width: 10px;
border-top: 2px solid #02a6b5;
border-right: 2px solid #02a6b5;
}
.footer::before {
position: absolute;
top: 0;
content: "";
left: 0;
height: 10px;
width: 10px;
border-bottom: 2px solid #02a6b5;
border-left: 2px solid #02a6b5;
}
.footer::after {
position: absolute;
top: 0;
content: "";
right: 0;
height: 10px;
width: 10px;
border-bottom: 2px solid #02a6b5;
border-right: 2px solid #02a6b5;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
height: 10px;
width: 100%;
}
</style>
<body>
<div class="wrap">
<div class="panel bl">
<div style="position: relative; width: 414px; height: 250px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"></div>
<div class="footer"></div>
</div>
</div>
</body>
</html>