是否有可能让孩子Div删除父div边界的一部分？

Question

使用CSS是否可以让子div边界"覆盖"或"删除"其父边界的一部分？基本上我想要一个边框,但不是在特定行的外面,我想这样做而不重新安排DOM结构.

请注意,innerNoBorder div它没有背景颜色.

我的例子(不起作用) -

HTML:

<div class="outerBorder">
    <div class="inner">hello</div>
    <div class="innerNoBorder">world</div> <!--have this remove border / override outerBorder -->
    <div class="inner">!</div>
</div>

CSS:

.outerBorder {
    border: 2px solid black;
}

.innerNoBorder {
    border-left:none;
    border-right:none;
}

JSFiddle 演示.

Answer 1

border属性不是从父级继承的,所以你的尝试不起作用......但你已经想到了这一点.

您可以通过在子项上使用负边距来重叠父div.请注意,您需要为孩子提供背景颜色才能使其正常运作.

.innerNoBorder {
    background: yellow;
    margin-left: -2px;
    margin-right: -2px;
}

更新小提琴

吴国良

方法相同,但与白色边框相比:

.innerNoBorder {
    border: 2px solid white;
    border-width: 0 2px;
    margin-left: -2px;
    margin-right: -2px;
}

更新小提琴