可选择性

Question

使用CSS可以有一个子div边界＆＃34;覆盖＆＃34;或＆＃34;删除＆＃34;其父母边界的一部分？基本上我希望有一个边框，但不是在特定行的外面，我不想重新安排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

边境财产不是从父母那里继承的，所以你的尝试不会起作用......但你已经想到了这一点。

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

.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

Answer 2

不，这是不可能的。

你能不能将.outBorder设置为没有左边框？

.outerBorder {
  border-left-width: 0;
}

或者您可以将.innerNoBorder div放在其父级的左侧，如下所示：

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

Answer 3

您可以使用box-shadow：

.innerNoBorder {
    box-shadow: 0 0 0 2px white;
}

FIDDLE：https://jsfiddle.net/lmgonzalves/bc6uLmhx/5/

Answer 4

您可以尝试使用伪元素：

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;
    position:relative;
}
.innerNoBorder:after {
    position: absolute;
    top: -50%;
    left: -2px;
    bottom: -50%;
    border: 1px solid white;
    z-index: 45478;
    content:"";
}

调整＆＃34;无边框＆＃34;的高度区域，只需调整top伪元素的bottom和:after值

演示：http://jsfiddle.net/lotusgodkk/bc6uLmhx/7/

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

4 个答案:

可选择性