i was wondering if there is something like text-shadow for DIVs, we all 开发者_JS百科know that text-shadow is only for dropping a shadow to the text, but i want a shadow for a complete DIV.
any ideas?
Thanks
If you're using text-shadow you are using CSS3, so try the box-shadow property.
Actually you can do it with css3 on the newer browsers and filters with IE. I read about it in this extremely good article a while back. Basically you can take the following CSS and apply it to a div and it should work with FF, Safari, Chrome, Opera, IE5.5 and up.
.module {
/* offset left, top, thickness, color with alpha */
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
/* IE */
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray');
/* slightly different syntax for IE8 */
-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray')";
}
You could try border-image
border-image: url(shadow.png);
CSS3 Only though
You can use images to get the shadow effects for divs. Alist apart has nice articles on it.
精彩评论