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

时间:2013-07-13 01:32:00

标签: css html-lists shadow css3

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>

2 个答案:

答案 0 :(得分: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);

}

答案 1 :(得分:0)

问题不在于li,而在于ul

解决这个问题的一种方法是为它设置一个合适的边距:

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

updated demo

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