CSS - How to add a glow effect around a fluid box?

Here's what I mean: http://www.lesliesommer.com/wdw07/html/images/glow.png

I need it to work with most browsers.

Could you point me to a tutorial or something?

Thanks for the answers. 开发者_高级运维Can I do it without CSS3 ?

css3 box shadows I'd think. These aren't implemented in IE8

-webkit-box-shadow: 0px 0px 15px #dddddd;
-moz-box-shadow: 0px 0px 15px #dddddd;
box-shadow: 0px 0px 15px #dddddd;

To add on to Groovetrain's answer, if you use rgba instead of a hex value you can have the colors be rendered with transparency letting whatever is below be seen through (which may or may not be valuable depending on the application).

-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.35);
box-shadow: 0px 0px 15px rgba(0,0,0,0.35);

There are a few techniques for this (outside of CSS3).

If the width is fixed, one way is to use two DIVS. One has the top and the sides. You need to make and image that is very tall, with the sides repeating and the bottom cut off and use it as a background on the outer DIV. Then make an image that contains the bottom, and nest it inside, and absolutely-position it to the bottom.

<div class="wrapper">
   ... content ...
   <div class="bottom"></div>
</div>

.wrapper {
    width:500px;
    background-image:url(....);
    position:relative;
}

.bottom {
   position:absolute;
   bottom:0px;
   height:20px;
   width:500px;
   background-image:url(....);
}

If it is x/y scaleable you can use the 9-slice method:

_|_|_
_|_|_
 | |

You slice your background into 9 pieces, where the middle piece is blank and contains your content. You make four corners and use repeat-x / repeat-y for the background of the sides.

http://www.css3.info/preview/box-shadow/

However, needs a CSS3 enabled browser.

Alternatively set a background image to get cross browser support: http://dimox.net/cross-browser-css3-box-shadow/