CSS设置边框的四个角的样式

效果图:

CSS设置边框的四个角的样式_第1张图片

html:

旅客人脸图

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

 

你可能感兴趣的:(前端,CSS)