[分享]css中如何让边框重叠不变厚

在CSS中，经常会出现需要为元素添加边框的情况，但是当两个元素挨着排列时，边框就会重叠并且看起来非常厚重。那么该如何做到边框重叠不变厚呢？ .box { border: 1px solid black...

在CSS中，经常会出现需要为元素添加边框的情况，但是当两个元素挨着排列时，边框就会重叠并且看起来非常厚重。那么该如何做到边框重叠不变厚呢？

 .box {
        border: 1px solid black;
        padding: 10px;
        margin: 10px;
    } 

代码中的.box表示一个元素，它的边框宽度为1像素，颜色为黑色，内边距和外边距都为10像素。

解决方法使用outline

 .box {
        border: 1px solid black;
        padding: 10px;
        margin: 10px;
        outline: 1px solid white;
    } 

使用outline可以为元素添加一个边框，但是这个边框不会影响元素的大小或位置，并且重叠时不会相互影响，从而达到边框重叠不变厚的效果。

当然，outline也可以用于其他一些效果，比如hover时的描边效果等。