css - ボックスの影を太い境界線の下から開始するにはどうすればよいですか?

Question

私はこのCSSを持っています：

.ab-banner
{
    background-color: #212121;
    background-image: url(logo.png);
    background-repeat: no-repeat;
    width: 100%;
    height: 45px;
    text-align: right;
    border-bottom: 2px solid #4DD2FF;
}

これは以下を生成します:

これを追加：box-shadow: 0px 2px 2px 0px #000;

これを生成します：

影をよく見ると、境界の真ん中から始まります。境界線の太さを増やすと同じ動作が発生するため、レイヤーの下部から開始されません。

境界線の下から影を開始するにはどうすればよいですか? hereのように境界線を背景画像として設定することでこれを行うことができることがわかりましたが、CSS でこれを行う方法はありませんか? 影を大きくすることでこれを回避できますが、それは私の設計が要求するものではありません。

これは私が欲しいものです：

編集: @StackOverFlow UI、その通りです。これは正しく機能します。例をありがとう！影が中央に表示された理由は、テーブル自体とテーブルに含まれる行の両方にスタイルが適用されたためです。そのスタイル クラス参照をいずれかから削除すると、問題が解決します。これにより、この質問の範囲を超えて、レイアウトのより深い問題が明らかになりました。関連性があるので、あなたの答えを受け入れます。