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

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 に答える