css - 有没有什么办法用背景色把部分border给遮挡呢？

Question

我要实现下图中的效果：排队人数后面没有灰色的线。由于项目是UI重构，所以得尽可能减少结构上的差异，我现在实际做出的效果是排队人数后面有父盒子的灰色border，请教大神们，有木有什么办法用子盒子的背景色覆盖父盒子的border。请赐教！

Answer 1

You can use positioning to float child elements. Assuming that the parent element has a 100% width border and a black border, you can set the child element to 102% and set its background color to red, so that the background color can cover the left and right borders of the parent box.

Answer 2

Can be implemented using: before and: after:
html

<p class="father">
    <p class="child"></p>
</p>

css

.father{
    border: 2px solid #000;
    position: relative;
    width: 200px;
}
.child{
    height: 100px;
    background-color: red;
}
.father:before{
    content: "";
    width: 2px;
    height: 100px;
    position: absolute;
    background: red;
    right: -2px;
    top: 0;
}

Effect

Use pseudo elements to cover the border~
-----------------------2017.4.12 Supplement--------- ------------------
I added pseudo elements to the child, and it’s ok too

.father{
    border: 2px solid #000;
    position: relative;
    width: 200px;
}
.child{
    height: 100px;
    background-color: red;
}
.child:before{
    content: "";
    width: 2px;
    height: 100px;
    position: absolute;
    background: red;
    right: -2px;
    top: 0;
}

The effect is the same as above. In order to make the effect more obvious, I set the width of the child element to 100px. The effect is as follows:

This is also okay~ I don’t know if I understand what you mean correctly... Above, Jiang Zi!

Answer 3

Dear, have you considered removing the border frame?

Answer 4

If you say it this way, isn’t it faster? ? ?