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

最新推荐文章于 2023-04-06 16:26:40 发布

陀陀吖

最新推荐文章于 2023-04-06 16:26:40 发布

阅读量919

点赞数

分类专栏： html与css

本文链接：https://blog.csdn.net/weixin_40422393/article/details/88909777

版权

html与css 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!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>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

陀陀吖

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
两个盒子合并边框大一倍解决方法011

<div></div><div></div><div></div><div></div><div></div>div{width: 200px;height: 400px;border: 4px solid red;float: left;margin-l...
复制链接

扫一扫