<body> <ul> <li class="box1">1</li> <li class="box2">2</li> <li class="box3">3</li> <li class="box4">4</li> </ul> </body>
<style> ul { height: 400px; width: 808px; margin: 0 auto; } li { width: 200px; height: 400px; border: 1px solid #000; float: left; list-style: none; } </style>
这样写完之后，会发现中间边框明显更粗，因为是两个盒子的边框并在一起。
解决方法是设置负的margin值
.box2, .box3, .box4 { margin-left: -1px;/*边框变成细线*/ }
然后我们设置鼠标经过盒子的样式，会发现，有盒子边框有一边不会变色
解决方法是：使用相对定位可以解决，如果li本身就具有定位，这时候可以使用z-index提高层级
li:hover { border: 1px solid rgb(52, 9, 209);/*鼠标经过前面三个盒子边框有一边不会变色*/ position: relative;/*使用相对定位可以解决*/ /* z-index: 1;如果li本身就具有定位，这时候可以使用z-index提高层级 */ }
