margin负值的巧妙应用解决边框叠加变粗的问题?(55)

 先看一下下面这个例子:

margin负值的巧妙应用解决边框叠加变粗的问题?(55)

 都加上边框,两个盒子之间有两个边框就会造成加粗的问题。

margin负值的巧妙应用解决边框叠加变粗的问题?(55)

 加入margin-left :-1;

margin负值的巧妙应用解决边框叠加变粗的问题?(55)

margin负值的巧妙应用解决边框叠加变粗的问题?(55)

加入鼠标经过边框变色的效果: 

margin负值的巧妙应用解决边框叠加变粗的问题?(55)

margin负值的巧妙应用解决边框叠加变粗的问题?(55)

可是前几个效果不是的 

margin负值的巧妙应用解决边框叠加变粗的问题?(55)

margin负值的巧妙应用解决边框叠加变粗的问题?(55)

加入定位就可以了。 

margin负值的巧妙应用解决边框叠加变粗的问题?(55)

margin负值的巧妙应用解决边框叠加变粗的问题?(55)

如果本来有定位,那就加入层级就可以了呀! 

margin负值的巧妙应用解决边框叠加变粗的问题?(55)

margin负值的巧妙应用解决边框叠加变粗的问题?(55)

margin负值的巧妙应用解决边框叠加变粗的问题?(55)