margin负值实现细边框
我们先准备五个div盒子,并设置好浮动和2px的实线黑色边框,看看效果
中间的边框线挨在了一起致使边框变粗成了4px,这时使用margin负值就可以解决这个问题
<style>
* {
margin: 0;
padding: 0;
}
div {
float: left;
width: 150px;
height: 300px;
border: #000 solid 2px;
}
.fu {
margin-left: -2px;
}
</style>
</head>
<body>
<div>1</div>
<div class="fu">2</div>
<div class="fu">3</div>
<div class="fu">4</div>
<div class="fu">5</div>
</body>
我们给后面四个盒子指定左边框为-2px,这时后面的盒子对的左边框就会覆盖到前一个盒子的右边框上,从而实现边框只有2px,效果图如下: