ボックスシャドウは3面のみです

Question

私はcss3ボックスシャドウを持つ2つの重なり合うdivを持っています。問題は、私がz-indexを設定してもdivのボックスシャドウの1つを削除する必要があるということです。負のスプレッドとゼロ値が使用されているケースを見ましたが、ここではうまくいかないと思います。

私が今持っているコードは次のとおりです。

#bulb-top { 
    position: relative; 
    width: 280px; 
    height: 280px; 
    background-color: #E5F7A3; 
    -webkit-border-radius: 280px; 
    -moz-border-radius: 280px; 
    border-radius: 280px; 
    border: 8px solid #FFF40C; 
    top: -430px; 
    margin-left: auto; 
    margin-right: auto; 
    -webkit-box-shadow: 0px 0px 15px 1px #FFF40C; 
    -moz-box-shadow: 0px 0px 15px 1px #FFF40C; 
    box-shadow: 0px 0px 15px 1px #FFF40C; 
    z-index: 4; 
} 

#bulb-bottom { 
    position: relative; 
    width: 140px; 
    height: 120px; 
    background-color: #E5F7A3; 
    -moz-border-radius-topleft: 0px; 
    -moz-border-radius-topright: 0px; 
    -moz-border-radius-bottomright: 30px; 
    -moz-border-radius-bottomleft: 30px; 
    -webkit-border-radius: 0px 0px 30px 30px; 
    border-radius: 0px 0px 30px 30px; 
    border-left: 8px solid #FFF40C; 
    border-right: 8px solid #FFF40C; 
    border-bottom: 8px solid #FFF40C; 
    top: -455px; 
    margin-left: auto; 
    margin-right: auto; 
    -webkit-box-shadow: 0px 0px 15px 1px #FFF40C; 
    -moz-box-shadow: 0px 0px 15px 1px #FFF40C; 
    box-shadow: 0px 0px 15px 1px #FFF40C; 
    z-index: 5; 
} 

http://jsfiddle.net/minitech/g42vq/3/

Answer 1

あなたはボックスシャドウの片側を遮断するために::before擬似要素を使用することができます。完璧ではありませんが、あなたの状況には十分かもしれません。 Here's the updated jsFiddle.

#bulb-bottom:before { 
    background-color: #E5F7A3; 
    content: ''; 
    display: block; 
    height: 30px; 
    margin: 0 auto; 
    position: relative; 
    top: -10px; 
    width: 140px; 
}​