ボックスシャドー不要カーブ

Question

私のページの上部にあるナビゲーションバー/ヘッダーにボックスの影を追加したいと思います。

私はこのように行うと：

.shadow { box-shadow: 0px 0px 5px #333 } 

それが正常に動作します。しかし、湾曲のために、あなたはそれが底部のコーナーで湾曲しているのを見ることができます - それはまっすぐな影であることが必要です。今

私のヘッダーには、ページの最上部をラップしているため - 幅が100％である - 私は、オフスクリーン側を拡張できます。

.shadow { 
    ... 
    box-shadow: 0px 0px 5px #333; 
    left: -10px; 
    right: -10px; 
    padding: 0px 10px /* compensates for the spaces created either side */ 
} 

曲線は、画面をオフに隠されているこの方法。しかし、これは汚れた、汚れたソリューションのようです - これは私が行っている効果を達成するための唯一の方法ですか？私は影をシミュレートするために、背景のグラデーションと後に追加することを考えてきました

は - そうのように：

.shadow:after { 
    content: ""; 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    top: 100%; 
    height: 10px; 
    background: gradientStuffICantRemember 
    -o-background: -prefixedFallBackGradientBrackgroundForEveryBrowserEverCreated 
    -ie-background: -prefixedFallBackGradientBrackgroundForEveryBrowserEverCreated 
    -ff-background: -prefixedFallBackGradientBrackgroundForEveryBrowserEverCreated 
    -webkit-background: -prefixedFallBackGradientBrackgroundForEveryBrowserEverCreated 
} 

しかしこれはunbarabely不潔とdisguistingです。

ヘッダーを拡張するだけですか？

Answer 1

box-shadowは、影のサイズを定義spreadと呼ばれる別のパラメータを持っている.....それは助けることができる：

box-shadow: h-dist v-dist blur spread colour; 

乾杯を！