CSS parent 元素的重叠边框，负边距

Question

我有嵌套的元素，容器有一种边框样式，我希望其中的一些元素有自己的边框与容器的边框重叠。我尝试使用负边距，但 child 的边框隐藏在 parent 的下方（似乎是溢出问题）。

HTML:

<div class="right">
    <div class="itemlist">
        <ol>
            <li>Abc</li>
            <li class="special">Abc</li>
            <li>Abc</li>
            <li>Abc</li>
            <li class="special">Abc</li>
            <li>Abc</li>
            <li>Abc</li>
        </ol>
    </div>
</div>

CSS:

.right {
    position: fixed;
    right: 0;
    top: 0;
    width: 200px;
    height: 100%;
    z-index: 100;
    display: flex;
    flex-direction: column;
    border-left: 3px solid #76ff03;
}

.right .itemlist {
    flex: 1;
    overflow-y: auto;
}

.itemlist > ol > li {
    border-bottom: 1px solid #76ff03;
    padding-left: 20px;
}


.itemlist > ol > li:hover, .itemlist > ol > li.special {
    border-left: 10px solid #2196f3;
    border-bottom: 1px solid #2196f3;
    margin-left: -3px;

}

我看过一些这样做的例子，在某些情况下可以让它工作，但不是始终如一。我有一个带有一些布局的示例 JSFiddle，下面是两个列表元素的图片以及我希望它们看起来像什么。

http://jsfiddle.net/jkondratowicz/e6uunLa4/1/

Answer 1

这是一种删除父容器上的边距并将其单独添加到每一行的方法

.right {
    position: fixed;
    right: 0;
    top: 0;
    width: 200px;
    background: #78909c;
    height: 100%;
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.itemlist > ol > li {
    border-bottom: 1px solid #76ff03;

    border-left: 3px solid #76ff03;
    padding-left: 20px;
}

以下是您需要使用 box-shadow 的样式

.itemlist > ol > li {
    box-shadow: inset 3px -1px 0px 0px #76ff03;
    padding-left: 20px;
}

.right .itemlist {
    flex: 1;
    overflow-y: auto;
    box-shadow: inset 3px 0px 0px 0px #76ff03;
}


.itemlist > ol > li:hover, .itemlist > ol > li.special {
    box-shadow: inset 10px -1px 0px 0px #2196f3;
    padding-left: 25px;
}

.right {
    position: fixed;
    right: 0;
    top: 0;
    width: 200px;
    background: #78909c;
    height: 100%;
    z-index: 100;
    display: flex;
    flex-direction: column;
}

http://jsfiddle.net/xnjn17uL/2/

CSS parent 元素的重叠边框，负边距

CSS overlapping border of parent element, negative margin

html

css

border