CSS盒子阴影如何实现渐变/淡出效果？

Question

我正在构建一个CSS下拉菜单，下拉菜单的背景有一个渐变/锥形的盒子阴影：

我在如何让盒子阴影逐渐消失方面遇到了麻烦。

目前我的进展如下：http://jsfiddle.net/Shpigford/f9aKR/ 我尝试使用伪类选择器:before和:after，以及其他方法，但是还没有完全掌握。

需要澄清的是，我只需要帮助下拉菜单的阴影。我的jsFiddle是一个简化版本，以使示例尽可能简单。

- Shpigford

---

不是的，只是偏移量而已。仔细看一下 :) 示例图像进行了逐渐淡出的处理，而我 jsFiddle 中的 CSS 只是淡化了阴影半径的数量。 - Shpigford

只是为了明确，您对 box-shadow 的底部部分感到满意，但您希望左侧和右侧的部分逐渐消失？ - thirtydot

@thirtydot 正确...阴影的顶部应该更渐变地淡出。 - Shpigford

Answer 1

1. 我添加了一个before元素。
2. 为其设置了渐变背景（从透明到半透明黑色），以实现从上到下的淡入淡出效果。
3. 给它添加了一个内阴影，以实现从内向外的淡出效果。

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

根据需要编辑淡入淡出效果和颜色。

- João Paulo Macedo