CSS3 Question: how to have no box shadow on the top of a div?

Question

Right now when I do this:

-moz-box-shadow: 0 0 200px #00C0FF; -webkit-box-shadow: 0 0 200px #00C0FF; box-shadow: 0 0 200px #00C0FF; 

it gives a box shadow on all sides. I want it on 3 sides but not the top. How to prevent the shadow from appearing at the top?

Answer 1

box-shadow support multiple commas which mean this is possible and can be done like below:

box-shadow: 2px 2px 3px #888, -2px 2px 3px #888; 

The first group bring shadow to the right & bottom while the second group bring shadow to the left (by using negative value) & bottom.

The complete code for cross browser support is:

-moz-box-shadow: 2px 2px 3px #888, -2px 2px 3px #888; -webkit-box-shadow: 2px 2px 3px #888, -2px 2px 3px #888; box-shadow: 2px 2px 3px #888, -2px 2px 3px #888; 

Answer 2

If you can nest two divs then you should be able to use a combination of margins and overflow:hidden to 'chop off' the top shadow without losing the required effect on the other edges.

For example this mark-up:

<div class="outer">     <div class="inner">hello</div> </div> 

And this CSS

.outer {     margin-top: 200px;     overflow: hidden;    }  .inner {     width:200px;     height: 200px;     margin: 0 200px 200px 200px;     -moz-box-shadow: 0px 5px 200px #00C0FF;     -webkit-box-shadow: 0px 5px 200px #00C0FF;     box-shadow: 0px 5px 200px #00C0FF; } 

Gives this result - http://jsfiddle.net/ajcw/SLTE7/2/