2

我正在尝试在另一个 div 上添加一个框阴影，但它被剪裁了。为什么以及如何解决它？

HTML：

<div id="top">
    <div id="box">

    </div>
    <div id="banner">

    </div>
</div>

CSS：

#box {
    height:30px;
    box-shadow: 80px 70px 3px rgba(30, 76, 80, 1) , 
                0px -2px 3px rgba(240, 21, 21, 1), 
                2px 0px 3px rgba(38, 238, 0, 1),
                -2px 0px 3px rgba(158, 29, 243, 1);
}

#banner{
    height:40px;
    background-color:orange;
}

JSFiddle：http: //jsfiddle.net/rQNg9/

结果应该在下一个 div 的顶部有阴影。

（我在 Windows 7 上运行 Chrome 28）

4

4 回答 4

5

DOM 的顺序自然在框“上方”有 #banner，因此您可以添加：

position: relative;
z-index: 1;

到#box，它将作为：http: //jsfiddle.net/rQNg9/1/

于 2013-07-29T03:30:21.360 回答
1

我希望我正确理解了你的问题。

例子

你需要有

position:relative;

为了

z-index:1;

正常工作。

我也改了

box-shadow: 8px 32px 3px rgba(30, 76, 80, 1) , 
            0px -2px 3px rgba(240, 21, 21, 1), 
            2px 0px 3px rgba(38, 238, 0, 1),
            -2px 0px 3px rgba(158, 29, 243, 1);

为了让阴影落在另一个div上

于 2013-07-29T03:33:57.160 回答
0 
*{
    padding:0px;
    margin:0px;
    }
    #box {
    height:30px;
    box-shadow: 80px 70px 3px rgba(30, 76, 80, 1) , 
                0px -2px 3px rgba(240, 21, 21, 1), 
                2px 0px 3px rgba(38, 238, 0, 1),
                -2px 0px 3px rgba(158, 29, 243, 1);
                position:relative;
                z-index:100;
}`enter code here`
于 2013-07-29T04:34:29.973 回答
0

尝试添加position: relative;到#box

于 2013-07-29T03:30:02.360 回答