html代码:
<div class="modal-box">
<!--左上边框-->
<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>
css代码:
.l_t_line {
width: 5px;
height: 24px;
left: -3px;
top: -3px;
}
.t_l_line {
height: 5px;
width: 26px;
left: -3px;
top: -3px;
}
.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_r_line {
height: 5px;
width: 26px;
right: -3px;
top: -3px;
}
.r_t_line {
width: 5px;
height: 24px;
right: -3px;
top: -3px;
}
.l_b_line {
width: 5px;
height: 24px;
left: -3px;
bottom: -3px;
}
.b_l_line {
height: 5px;
width: 26px;
left: -3px;
bottom: -3px;
}
.r_b_line {
width: 5px;
height: 24px;
right: -3px;
bottom: -3px;
}
.b_r_line {
height: 5px;
width: 26px;
right: -3px;
bottom: -3px;
}
.modal-box {
position: relative;
background-color: rgba(21,14,104,0.6);
box-sizing: border-box;
border: 1px solid #2C58A6;
box-shadow: 0px 0px 10px rgb(59,150,248) inset;
}