Can I combine a top/bottom and a radial gradient to make a DIV stick out from a page

I have the following gradient in firefox:

-moz-linear-gradient(top,#222 0%,#444 5%,#333 20%,#333 95%, #222 100%)

this works good for a horizontal band used on my web page but now I would like to use a similar gradient to make a logo appear as though it sticks out from the page. Does anyone out there know how I could apply a gradient to a div of for example 200 by 开发者_高级运维30 pixels and have that with a gradient that makes it look like it stands up from a black page like a button with gradient on all four sides?

Hope there's some new feature that can do this.

Marie

---

It sounds like a drop shadow is what you want. Usually this would apply a gradient to the right and bottom sides, but if you set the X and Y offset to 0, then it should apply to all sides.

There is a box-shadow CSS rule for this, and here is an example with the Mozilla vendor prefix (-moz-):

div.box {
    width:200px;
    height:30px;
    -moz-border-radius: 15px;
    -moz-box-shadow: 0px 0px 10px #fff;
}

<div class="box">logo?</div>

This should give you a rounded box with gradients "outside". There are other vendor prefixes and the prefix-less standard that you should consider including too. For IE too, I think there is a shadow filter you can look into.

Hope that helps.