css - 锥形/淡化 CSS 框阴影？

Question

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

我无法解决如何让盒子阴影真正变细/淡出。

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

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

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

Answer 1

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

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

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