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

最新推荐文章于 2025-10-28 18:03:24 发布

原创最新推荐文章于 2025-10-28 18:03:24 发布 · 1.8w 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

前端同时被 2 个专栏收录

71 篇文章

订阅专栏

CSS

14 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现的旅客人脸图展示效果，通过在图片周围添加带有白色边框的角标来增强视觉效果。该效果包括四个定位在图片四角的边框元素，以及用于包裹整体的边框容器。

效果图：

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