两个盒子合并边框大一倍解决方法011

最新推荐文章于 2025-06-10 23:22:31 发布

陀陀吖

最新推荐文章于 2025-06-10 23:22:31 发布

阅读量993

点赞数

CC 4.0 BY-SA版权

分类专栏： html与css

本文链接：https://blog.youkuaiyun.com/weixin_40422393/article/details/88909777

html与css 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一个关于CSS布局中相邻元素边框重叠的问题及其解决方案。通过调整边框样式和使用z-index属性，解决了当鼠标悬停在一个盒子上时，其边框颜色改变但与其他盒子边框重叠部分颜色不一致的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>盒子边框</title>
	<style>
	div{
		width: 200px;
		height: 400px;
		border: 4px solid red;
		float: left;
		margin-left: -4px;   /*解决两个盒子合并在一起，边框变成两倍大的问题,但是鼠标上去边框颜色改变又出现左盒子边框不完全变色问题*/
		position: relative;     /*第二种情况*/
	}
	div:hover{
		border:4px solid blue ;
		/*position: relative;*/    /*(本身盒子没有加定位的情况)第一种方法：*/ /*改变盒子边框重合部分不变色的问题*/  /*因为层级比别人搞  浮起来的*/
		z-index: 1;                /*（本身盒子加了定位的情况）第二种方法：  如果本盒子就有加了定位的话，就用z-index:1;*/
	}
	</style>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>