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

Question

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

我无法解决如何让盒子阴影实际逐渐变细/渐弱的问题.

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

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

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

Answer 1

1. 我添加了一个before元素.
2. 给它一个渐变背景(从透明到半透明的黑色),以实现从上到下的淡入淡出.
3. 给它一个插入的盒子阴影来实现in - > outfade.

看看 - > http://jsfiddle.net/f9aKR/22/

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