css - CSS3 Box Shadow on Top, Left, and Right Only

Question

Greetings,

I am trying to apply a CSS3 box shadow to only the top, right, and left of a DIV with a radius that matches the result of the following CSS (minus the bottom shadow)

 #div {
    -webkit-box-shadow: 0px 0px 10px #000;
    -moz-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 10px #000;
}

What would be the best way to accomplish this?

Thanks!

UPDATE This shadow will be applied to a nav bar on a page, the bar is positioned on the top of the main container DIV. What I am trying to accomplish is to continue the box shadow of the main DIV onto the nav bar, which sits above it, but without a bottom shadow on the nav bar. Take a look at the site itself to see what I'm talking about, easier than adding all of the HTML and CSS here.

UPDATE 2 Since the DIV I am working with is singular, rather than trying to place a shadow on each nav li, I elected to change it to the following:

-webkit-box-shadow: 0px -4px 7px #e6e6e6;
    -moz-box-shadow: 0px -4px 7px #e6e6e6;
    box-shadow: 0px -4px 7px #e6e6e6;

This makes the top of the shadow very noticeable but it's what I am trying to accomplish - if anyone knows of a way to keep the shadow the same in appearance to the container DIV, please let me know. Thanks!

Answer 1

use the spread value...

box-shadow has the following values

box-shadow: x y blur spread color;

so you could use something like..

box-shadow: 0px -10px 10px -10px black;

UPDATE: i'm adding a jsfiddle