How can I make a CSS wraparound drop shadow? Or is there a good way? With the least duct tape?

Question

I would like a rectangular DIV to have a dropshadow around it on all four sides.

Now I might be able to get something like I want by using a container div and have one drop shadow with positive and one with negative values; I haven't seen what I could push. And because this is being done in boilerplate code, I could have a series of nested DIV's with different border colors, the old pre-CSS way. Some way I might be able to make four dropshadows for four DIV's. See, for instance, "CSS shadows on 3 sides."

However, all the solutions I have seen, or seen evidence of in searching, smell like duct tape. Are drop shadows strongly enough designed for 2 sides that 4 sides cannot be gracefully implemented without duct tape?

I'll use duct tape if I have to, but I'd rather find out if there's a good way to do it before choosing among brands of duct tape.

Answer 1

You're looking to have more of an overhead, hover shadow?

.shadow {
    -webkit-box-shadow:0 0 10px rgb(0,0,0);
    -moz-box-shadow:0 0 10px rgb(0,0,0);
    box-shadow:0 0 10px rgb(0,0,0);
}

You can use it with inset too, makes a really nice 3d look to the edges.

Answer 2

You can just add the optional spread value (the 10px) to your syntax. Like this:

.dropshadow {
-webkit-box-shadow: 0px 0px 5px 10px rgba(0,0,0,.5);
-moz-box-shadow: 0px 0px 5px 10px rgba(0,0,0,.5);
box-shadow: 0px 0px 5px 10px rgba(0,0,0,.5);
}