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