css - 是否可以让子 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 demo .

Answer 1

border 属性不是从父级继承的，所以你的尝试不会成功......但你已经知道了。

您可以通过在子元素上使用负边距来重叠父元素。请注意，您需要为 child 提供背景颜色以使其发挥作用。

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

Updated Fiddle

备选方案

相同的方法，但不是带有白色边框:

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

Updated Fiddle