<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
background: #101129;
}
h1 {
color: #08ACEE;
}
.box1>div {
display: inline-block;
}
.d-img {
width: 400px;
height: 300px;
/* 是用于告诉浏览器如何计算一个元素是总宽度和总高度 */
box-sizing: border-box;
/* 边框 : 像素 线 颜色 */
border: 20px solid #101129;
border-image: url(./images/border.png) 51 32 18 66;
/* border-width属性设置一个元素的四个边框的宽度
这里设置宽度是为了更好的显示边框图片，如有疑问可以注释看下效果
*/
border-width: 51px 36px 21px 65px;
/* 相对定位，为了方便在div里添加的内容div定位 */
position: relative;
}
.bg {
width: 340px;
background: #08ACEE;
position: absolute;
top: -20px;
left: -40px;
}
.mg {
margin: 20px;
}
/* 样式2 */
.div_border {
width: 400px;
height: 330px;
box-shadow: -10px 0px 15px #034c6a inset,
0px -10px 15px #034c6a inset,
10px 0px 15px #034c6a inset,
0px 10px 15px #034c6a inset;
border: 1px solid #034c6a;
box-sizing: border-box;
position: relative;
margin-top: 25px;
}
.div_title {
background-color: #034c6a;
border-radius: 18px;
position: absolute;
height: 35px;
width: 60%;
top: -15px;
color: #ffffff;
font-weight: bold;
font-size: 16px;
left: 20%;
line-height: 35px;
text-align: center;
}
.div_title img {
width: 18px;
height: 18px;
position: relative;
top: 4px;
margin-right: 5px;
}
/* */
.box1 .main_left {
width: 400px;
height: 300px;
}
.box1 .main_left>div {
width: 100%;
height: 280px;
box-sizing: border-box;
border: 1px solid #2C58A6;
position: relative;
box-shadow: 0 0 10px #2C58A6;
}
.t_line_box {
position: absolute;
width: 100%;
height: 100%;
}
.t_line_box i {
background-color: #4788fb;
box-shadow: 0px 0px 10px #4788fb;
position: absolute;
}
/* 左上边框 */
.t_l_line {
height: 5px;
width: 26px;
left: -3px;
top: -3px;
}
.l_t_line {
width: 5px;
height: 24px;
left: -3px;
top: -3px;
}
/* 右上边框 */
.t_r_line {
height: 5px;
width: 26px;
right: -3px;
top: -3px;
}
.r_t_line{
width: 5px;
height: 24px;
right: -3px;
top: -3px;
}
/* 左下 */
.l_b_line{
height: 5px;
width: 26px;
left: -3px;
bottom: -3px;
}
.b_l_line{
width: 5px;
height: 24px;
left: -3px;
bottom: -3px;
}
/* 右下 */
.r_b_line{
height: 5px;
width: 26px;
right: -3px;
bottom: -3px;
}
.b_r_line{
width: 5px;
height: 24px;
right: -3px;
bottom: -3px;
}
/* 样式3 */
.main_left div .main_title {
width: 210px;
height: 35px;
line-height: 33px;
background-color: #2C58A6;
border-radius: 18px;
position: absolute;
top: -17px;
left: 50%;
margin-left: -90px;
color: #fff;
font-size: 18px;
font-weight: 600;
box-sizing: border-box;
padding-left: 45px;
z-index: 1000;
}
.main_left div .main_title img {
width: 18px;
height: 18px;
position: absolute;
top: 8px;
left: 20px;
}
</style>
</head>
<body>
<!-- 样式1 -->
<div class="box1 mg">
<h1>样式1</h1>
<div class="d-img">
<div class="bg">
好看的边框样式，适用于大数据平台页面，炫酷
</div>
</div>
<div class="mg">
<h1>原本的图片</h1>
<img src="images/border.png">
</div>
</div>
<!-- 样式2 -->
<div class="box1 mg">
<h1>样式2</h1>
<div class="div_border">
<div class="div_title">
<img src="./images/title_1.png">各部门采集数据量
</div>
</div>
</div>
<!-- 样式3 -->
<div class="box1 mg">
<h1>样式3</h1>
<div class="main_left">
<div style="cursor: pointer;">
<!--左上边框-->
<div class="t_line_box">
<i class="t_l_line"></i>
<i class="l_t_line"></i>
</div>
<!--右上边框-->
<div class="t_line_box">
<i class="t_r_line"></i>
<i class="r_t_line"></i>
</div>
<!--左下边框-->
<div class="t_line_box">
<i class="l_b_line"></i>
<i class="b_l_line"></i>
</div>
<!--右下边框-->
<div class="t_line_box">
<i class="r_b_line"></i>
<i class="b_r_line"></i>
</div>
<div class="main_title">
<img src="./images/title_1.png" alt="">
各部门采集数据量
</div>
</div>
</div>
</div>
</body>
</html>
image图片
下面这张图片为白色有点看不见，点击右键另存为即可，也可以使用图标代替
