CSS边框没有显示出来

Question

Here's the fiddle

我正在尝试将第一个<li>设置为具有与相邻元素边框重叠的边框 - 这将用于在当前选择相应的菜单项时隐藏边框的一部分（通过显示与黑暗重叠的白色边框）。

CSS：

.side-study-box .side-box-menu .nav-selected {
    /* Works, but I need it to overlap the black border on the right */
    border-right: 2px red inset;
    /* Does not show the border because it's hidden */
    border-right: 2px red; /* Works */
    z-index: 101;
}

这是我的代码：

<div class="viewport">
    <ul>
        <li> <a class="side-box-menu-control nav-text" data-bind="css: { 'nav-selected': true }"><i class="icon-pencil"></i></a>
        </li>
        <li> <a class="side-box-menu-control nav-picture"><i class="icon-picture"></i></a>
        </li>
        <li> <a class="side-box-menu-control nav-video"><i class="icon-facetime-video"></i></a>
        </li>
    </ul>
</div>

Answer 1

你可以尝试这样的事情（将border-type设置为solid）：

.side-study-box .side-box-menu .nav-selected {
    width: 22px;
    border-right: 3px red solid;
}

jsfiddle