锥形/褪色CSS框阴影？ [英] Taper/fade CSS box shadow?

问题描述

我有一个CSS下拉菜单，我试图建立，下拉的背景有一个褪色/渐变框阴影：

我遇到问题

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

我试过使用：before 和：之后伪选择器，但不能完全正确。

为了说明，我特别需要帮助下拉的阴影。

解决方案

1. 我添加了一个before元素。


2. 给它一个渐变背景（从透明到半透明黑色），以实现从顶部到底部的淡入淡出。





取得look - > http://jsfiddle.net/f9aKR/22/





根据需要编辑褪色/颜色的数量。




I've got a CSS drop down menu that I'm trying to build, and the background of the drop down has a faded/tapered box shadow:

I'm having trouble pulling off how to get the box shadow to actually taper/fade off.

Here's where I'm at right now: http://jsfiddle.net/Shpigford/f9aKR/

I've tried using :before and :after pseudo selectors, among other things, but can't quite get it right.

For clarification, I'm specifically only needing help with the shadow on the drop down. My jsFiddle is a stripped down version to keep the example as straightforward as possible.

解决方案

1. I've added a before element.
2. gave it a gradient background (from transparent to a semi transparent black) to achieve the top to bottom fade.
3. gave it an inset box shadow to achieve the in -> outfade.

Take a look -> http://jsfiddle.net/f9aKR/22/

Edit the amount of fade/colors as you want.

这篇关于锥形/褪色CSS框阴影？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！