锥形/褪色CSS框阴影? [英] Taper/fade CSS box shadow?
问题描述
我有一个CSS下拉菜单,我试图建立,下拉的背景有一个褪色/渐变框阴影:
我遇到问题
这里是我现在的位置: http://jsfiddle.net/Shpigford/f9aKR/
我试过使用:before
和:之后
伪选择器,但不能完全正确。
为了说明,我特别需要帮助下拉的阴影。
- 我添加了一个before元素。
- 给它一个渐变背景(从透明到半透明黑色),以实现从顶部到底部的淡入淡出。
- I've added a before element.
- gave it a gradient background (from transparent to a semi transparent black) to achieve the top to bottom fade.
- gave it an inset box shadow to achieve the in -> outfade.
取得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.
Take a look -> http://jsfiddle.net/f9aKR/22/
Edit the amount of fade/colors as you want.
这篇关于锥形/褪色CSS框阴影?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!