html - 隣接する div 間の影の継ぎ目

Question

隣接する要素は通常、それらの間に線や継ぎ目がなく、融合したように見えます)。例: http://jsfiddle.net/4m3L79w4/1/

ただし、シャドウが使用されている場合、これは当てはまらないようです。

HTML:

<div class="top"></div>
<div class="bottom"></div>

CSS:

DIV {
    background-color: #7faf7f;
    width: 400px;
    height: 50px;
    position: relative;
    box-shadow: 0px 5px 20px 5px #000000;
}
.top {
    z-index: 2;
}
.bottom {
    z-index: 2;
}

「下」要素は、「上」要素の上に影を投影しますが、両方とも同じ z インデックスを持っています。

JSFiddle: https://jsfiddle.net/b4fvb7e0/1/

外観が融合するように、2 つの要素の間の影を消すことは可能ですか?

これは実際に私が作成しようとしているヘッダーの単純化されたバージョンであり、一部のページでは次の要素に融合して表示されるはずです。スタンドアロンのヘッダーと次の要素を持つ JSFiddle: http://jsfiddle.net/c8oat7vo/3/