Question

父div上的阴影不会影响其中li元素的边框。有谁知道如何解决这个问题？

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;
}

updated demo

我改变了阴影的颜色，使其更加明显。

CSS3插入框阴影不在边框上工作

2 个答案: