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

It’s better if you just cover the bottom part with another div and you will get consistent drop shadow across the board.

#servicesContainer {
  /*your css*/
  position: relative;
}

and it’s fixed! like magic!