CSS: What's a good way to create a raised box effect?

Question

That is, the left and bottom borders of the element need to give a 3d effect of it popping out. Is there a good, purely-CSS way to accomplish this effect?

Answer 1

#foo {
    /* ... */
    border:8px outset #999;
    -webkit-box-shadow: 5px 5px 15px rgba(0,0,0,0.4);
    -moz-box-shadow: 5px 5px 15px rgba(0,0,0,0.4);
}

Here's the example live: http://jsfiddle.net/sjkXS/1/
Yes, the effect here is cheesily-extreme, indended to showcase what is possible.

Answer 2

I found this question while trying to figure this out as well, and I think what you're looking for is something like this http://jsfiddle.net/9Lt2477w/.

.raisedbox { 
    padding: 10px;
    border: 1px solid #77aaff;
    box-shadow:  -1px 1px #77aaff,
         -2px 2px #77aaff,
         -3px 3px #77aaff,
         -4px 4px #77aaff,
         -5px 5px #77aaff;
}

Thanks to http://sam-morrow.com/playground/css-cubes.py for the help here. I didn't realize you could just keep adding additional lines into the box-shadow property.