[分享]css两个边框横合并

在CSS中，我们可以使用border属性为元素设置边框。当我们希望为一个元素设置两个不同颜色的水平边框时，可以采用两个边框横合并的方式。/ 设置两个不同颜色的水平边框 / bordertop: 2px...

在CSS中，我们可以使用border属性为元素设置边框。当我们希望为一个元素设置两个不同颜色的水平边框时，可以采用两个边框横合并的方式。

/* 设置两个不同颜色的水平边框 */
border-top: 2px solid red;
border-bottom: 2px solid blue;

/* 合并成一个水平边框 */
box-shadow: 0px 3px 0px 0px red, 0px -3px 0px 0px blue; 

上述代码中，我们首先为元素设置了一个红色的上边框和一个蓝色的下边框。然后使用box-shadow属性，设置两个不同的阴影颜色。第一个阴影偏移量为0px，阴影距离为3px，阴影颜色为红色，模糊半径为0px。第二个阴影偏移量为0px，阴影距离为-3px，阴影颜色为蓝色，模糊半径为0px。这样就可以将两个边框合并成一个水平边框，同时保留不同的颜色。

需要注意的是，使用box-shadow属性合并边框时，会产生一定的阴影效果。如果不希望出现阴影效果，可以将模糊半径设为0px，或者使用inset关键字表示内阴影。另外，合并边框的方式并不适用于所有情况，需要根据具体的需求进行调整。