html-lists - 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

好的，我明白了。由于嵌入阴影是 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);

}

Answer 2

问题不在于 li，而在于 ul

解决它的一种方法是为其设置右边距：

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

更新的演示

我更改了阴影的颜色以使其更明显。