锥形/淡入淡出CSS框阴影？

Question

我有一个CSS下拉菜单，我正在尝试构建，下拉的背景有一个褪色/锥形框阴影：

我无法解决如何让盒子阴影实际逐渐变细/淡出。

这就是我现在所处的位置：http://jsfiddle.net/Shpigford/f9aKR/

我已经尝试过使用:before和:after伪选择器等等，但不能完全正确。

为了澄清，我特别需要帮助下拉下的阴影。我的jsFiddle是一个精简版本，以使示例尽可能简单。

Answer 1

1. 我添加了一个before元素。
2. 给它一个渐变背景（从透明到半透明的黑色）以实现从上到下的渐变。
3. 给它一个插入框阴影来实现in - ＆gt; outfade。

看看 - ＆gt; http://jsfiddle.net/f9aKR/22/

根据需要编辑淡入淡出/颜色的数量。