父元素的CSS重疊邊框，負邊距

Question

我有嵌套的元素，容器具有一種邊框樣式，並且我希望其中的某些元素具有與容器的邊界重疊的自己的邊界。 我嘗試使用負邊距，但是孩子的邊框隱藏在父母的邊框下方（似乎是溢出問題）。

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

這是您使用盒子陰影所需的樣式

.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/