css - テーパー/フェード CSS ボックスの影?

Question

作成しようとしている CSS ドロップダウン メニューがあり、ドロップダウンの背景には色あせた/先細りのボックス シャドウがあります。

ボックスの影を実際に先細り/フェードオフする方法をうまくやってのけることができません。

これが私が今いるところです：http://jsfiddle.net/Shpigford/f9aKR/

疑似セレクターなどを使用してみましたが:before、うまくいきません。:after

明確にするために、特にドロップダウンの影についてのみ助けが必要です。私の jsFiddle は、例をできるだけ単純にするために簡素化されたバージョンです。

Answer 1

1. before 要素を追加しました。
2. 上から下へのフェードを実現するために、グラデーションの背景（透明から半透明の黒まで）を与えました。
3. イン -> アウトフェードを達成するためにインセット ボックス シャドウを与えました。

見てみましょう - > http://jsfiddle.net/f9aKR/22/

必要に応じてフェード/カラーの量を編集します。