[解決済み] CSS3 のボックスシャドウを一面以外に作成する

質問

タブ付きのナビゲーション バーを使用していますが、開いているタブに影をつけて、他のタブと区別できるようにしたいと思います。また、タブ セクション全体に 1 つの影 (下の水平線を参照) を付けて、開いているタブ以外のすべてのタブの下部に影を付けるようにしたいと思います。

ここでは、CSS3 の box-shadow プロパティを使って行うのですが、必要な部分だけ影をつける方法がわかりません。

通常は、開いているタブの下部の影をコンテンツ領域で隠してしまうのですが（より上位の z-index で隠しますが、この場合、コンテンツ領域自体に影があるため、タブを覆ってしまうだけになってしまいます。

タブのレイアウト

     
    
____|_______|__| |__|_______|______

シャドーラインです。

影は横の線から上に、縦の線の外側に行くことになる。

                _______
               | |
_______________| |_________________

ここで は実際の例です。

天才の皆さん、何かお手伝いできることはありませんか？

どのように解決するのですか？

サンプルでは、#contentの中に以下のようなスタイルでdivを作成しています。

#content_over_shadow {
    padding: 1em;
    position: relative; /* look at this */
    background:#fff;    /* a solid background (non transparent) */
}

で、#contentのスタイルを変更し（paddingsを削除）、shadowを追加します。

#content {
    font-size: 1.8em;
    box-shadow: 0 0 8px 2px #888; /* line shadow */
}

タブに影をつける。

#nav li a {
    margin-left: 20px;
    padding: .7em .5em .5em .5em;
    font-size: 1.3em;
    color: #FFF;
    display: inline-block;
    text-transform: uppercase;
    position: relative;
    box-shadow: 0 0 8px 2px #888; /* the shadow */
}