How can I get box-shadow only on certain sides?

What values n开发者_开发知识库eed to be defined for a box-shadow that only appears at the bottom.

.element{box-shadow:0 -5px 10px #000}

first value is the position of the shadow on the X, second is the position of the shadow on the Y, third is the shadow dimension, fourth the color.

By putting a negative position Y of half of the shadow dimension, you get no shadow at the bottom of your element.

You could put your box in another one, smaller, with height and width defined, have the overflow hidden, and with a relative position, you hide the shadow you don't want.

This has been asked millions of times. Just use the spread parameter to make it smaller, then move it so that it appears on one side only. Similar question here: drop shadow only bottom css3

I still haven't found a decent looking way that would work in all situations. Here are two methods:

1.) http://jsfiddle.net/pGGXH/28/ - use padding+overflow to show the shadow.

<div class="no-overflow">
   <div class="box">my box</div>
</div>

.no-overflow {
    overflow:hidden;
    padding:5px 5px 0 5px;
}
.box {
    border:1px solid #000;
    border-radius:5px;
    box-shadow:0 0 5px #333;
    padding:10px;
}

2.) http://jsfiddle.net/pGGXH/33/ - uses stacking border-shadows (you can get multiple border shadows stacked one on top of the other)

<div class="box">my box</div>

.box {
    border:1px solid #000;
    border-radius:5px;
    box-shadow:0 10px 0 #fff, 0 0 5px #333;
    padding:10px;
}

However with border-radius both solutions don't turn out that well.

It appears it's not possible ( http://www.w3.org/TR/css3-background/#the-box-shadow ), you have to try some length values.

The box-shadow property allows web designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset.

The property syntax is as follows:

box-shadow: none | <shadow> [ , <shadow> ]*

<shadow> = inset? && [ <length>{2,4} && <color>? ] 

For example;

box-shadow: 3px -3px 3px #000000; //Shadow towards North East direction.

Check and experiment here... http://jsfiddle.net/jgsdS/