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

你可以尝试这样的事情（边界类型设置为solid）：

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

jsfiddle