触摸图片显示边框

最新推荐文章于 2021-06-08 10:53:52 发布

广东话的蛇皇

最新推荐文章于 2021-06-08 10:53:52 发布

阅读量114

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43618136/article/details/104502624

版权

前端专栏收录该内容

352 篇文章 1 订阅

订阅专栏

触摸图片显示边框

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div {
		width: 632px;
		height: 340px;
		position: relative;
		border-radius: 10px;
		overflow: hidden;
	}
	div:hover::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		border: 20px solid rgba(255, 255, 255, 0.5);
		box-sizing: border-box;
	}

	</style>
</head>
<body>
	<div>
		<img src="mi.jpg" alt="">
	</div>
</body>
</html>