效果图:
html:
<div class="other-people">
<div class="image-border image-border1"></div>
<div class="image-border image-border2"></div>
<div class="image-border image-border3"></div>
<div class="image-border image-border4"></div>
<div class="other-people-title">旅客人脸图</div>
<img src="../../../assets/images/people.png" class="other-image" />
</div>
css:
.image-border {
position: absolute;
width: 20px;
height: 20px;
}
.image-border1 {
top: 0;
left: 0;
border-left: 5px solid #FFFFFF;
border-top: 5px solid #FFFFFF;
}
.image-border2 {
top: 0;
right: -2px;
border-right: 5px solid #FFFFFF;
border-top: 5px solid #FFFFFF;
}
.image-border3 {
bottom: 0;
left: 0;
border-bottom: 5px solid #FFFFFF;
border-left: 5px solid #FFFFFF;
}
.image-border4 {
bottom: 0;
right: -2px;
border-right: 5px solid #FFFFFF;
border-bottom: 5px solid #FFFFFF;
}
.other-people {
border: 1px dashed rgb(44, 131, 221);
width: 579px;
height: 512px;
margin-left: 61px;
padding: 5px;
position: relative;
}
.other-image {
width: 100%;
height: 100%;
}
.other-people-title{
position: absolute;
background: rgb(21, 90, 154);
height: 52px;
opacity: 0.5;
font-size: 14px;
line-height: 52px;
top: 25px;
left: 25px;
}