效果圖：

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;
}