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

Question

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

Answer 1

可以使用定位，讓子元素浮起來。假設父元素是100%寬度邊框是黑色，可以將子元素設定為102%,將其背景色設為red,從而讓背景色可以將父盒子左右邊框覆蓋。

Answer 2

可以用：before和：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;
}

效果

用偽元素遮住border~
-----------------------2017.4.12 補充--------- ------------------
我把child加了偽元素，也是可以的呢

.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;
}

效果同上，為了讓效果更明顯，我把子元素的寬設成100px，效果如下：

這樣也是可以的呢~不知道我理解你的意思理解的對不對...以上，醬紫！

Answer 3

親，是否考慮把border的框架去掉呢？

Answer 4

如果這樣子說，這樣子不更快？ ？ ？