<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 400px;
border: 1px solid red;
float: left;
/*消除中间线的粗线，使得所有的线看起来一样粗*/
margin-left: -1px;
}
div:hover {
/*导致除了最后一个盒子少一个边框*/
border: 1px solid green;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 400px;
border: 1px solid red;
float: left;
/*消除中间线的粗线，使得所有的线看起来一样粗*/
margin-left: -1px;
}
div:hover {
/*导致除了最后一个盒子少一个边框*/
border: 1px solid green;
/*相对定位，提高层级，可以看到边框*/
position: relative;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
