CSS3插入框陰影不能在邊界上工作

Question

父div上的陰影不會影響其中的li元素的邊框。有誰知道如何解決這個問題？

下面是一些代碼：http://jsfiddle.net/ukhgK/2/

CSS：

#b { 
    box-shadow: inset -6px 0px 12px -4px rgba(0,0,0,0.74); 
     background-color:#a3a3a3; 
    height:100%; 
    width:150px; 
} 
ul { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
} 
li { 
    z-index:9; 
    color:white; 
    line-height:40px; 
    padding-left:6px; 
    height:40px; 
    font-size:14px; 
    text-transform: uppercase; 

    border-bottom:10px solid #828282; 
    border-top:10px solid #b8b8b8; 

} 

HTML

<div id="b"> 
    <ul> 
     <li>Number1</li> 
     <li>Number2</li> 
    </ul> 
</div> 

Answer 1

的問題是不是與李的，它與UL

的一種方式解決它是設置一個正確的餘量：

ul { 
    padding: 0; 
margin: 0; 
    margin-right: 12px; 
    list-style: none; 
} 

updated demo

我改變陰影的顏色，使其更加明顯。

Answer 2

好的，我明白了。由於插入陰影是div元素背景的一部分，因此您需要將其上面的元素設置爲透明，以便透視它們。

固定碼： http://jsfiddle.net/ukhgK/5/

li { 
    z-index:9; 
    color:white; 
    line-height:40px; 
    padding-left:6px; 
    height:40px; 
    font-size:14px; 
    text-transform: uppercase; 

    border-bottom:10px solid rgba(110, 110, 110, 0.2); 
    border-top:10px solid rgba(210, 210, 210, 0.2); 

}