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

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/