[分享]css两个边框重合

CSS中可通过设置两个边框重合来实现不同的视觉效果。其实现方式有多种选择，可以通过设置不同的CSS属性或使用伪类实现。一种实现方式是通过设置boxshadow属性。boxshadow可用于设置元素的阴...

CSS中可通过设置两个边框重合来实现不同的视觉效果。其实现方式有多种选择，可以通过设置不同的CSS属性或使用伪类实现。

一种实现方式是通过设置box-shadow属性。box-shadow可用于设置元素的阴影效果，如果将此属性设置为两个相同的颜色，且将spread-radius值调整到元素边框宽度的一半，则可实现两个边框的重合效果。

.example {
    border: 2px solid #ccc;
    box-shadow: 0 0 0 4px #ccc, 0 0 0 6px #fff; 
} 

另一种实现方式是通过使用伪元素before和after来实现。通过设置两个伪元素的样式，将其放置于元素外部并与元素的边框重合即可。需要注意的是，伪元素需要设置绝对定位和偏移量来实现正确的位置。

.example {
    border: 2px solid #ccc;
    position: relative;
}
.example:before, .example:after {
    position: absolute;
    content: "";
    top: -2px;
    left: -2px;
    border: 2px solid #fff;
}
.example:before {
    top: -4px;
    left: -4px;
} 

以上两种实现方式都可以实现两个边框的重合效果。需要根据实际情况选择合适的方法来实现。