将阴影应用于div [英] Applying drop shadows to divs

问题描述

我需要一点帮助将阴影图像应用到一系列DIV元素。有问题的元素已经有一个背景图片，所以我包装其他DIV周围。事情变得更复杂，因为我也使用960gs CSS框架。

I need a bit of help applying a drop shadow image to a range of DIV elements. The elements in question already have a background image so I am wrapping another DIV around them. Things get complicated further because I'm also using the 960gs CSS framework.

这是我当前的内容框类型显示的HTML：

This is my current HTML for a content box type display:

<div class="grid_12 boxout-shadow-920">
 <div class="boxout">
  <p>The personal site and blog of CJD. The site is still a work-in-progress but please do have a look around and let me know what you think! </p>
 </div>
</div>

Boxout CSS：

Boxout CSS:

.boxout {
 background:url("../images/overlay.png") repeat-x scroll 0 0 #EEEEEE; 
 -moz-border-radius:4px 4px 4px 4px;
 border:1px solid #DDDDDD;
 margin-bottom:15px;
 padding:5px;
}

boxout-shadow-920 CSS：

boxout-shadow-920 CSS:

.boxout-shadow-920 {
 background:url("../images/box-shadow-920.png") no-repeat scroll 50% 101% transparent;
}

boxshadow图像显示在内容框的底部，这是我想要的。然而，由于我使用的固定百分比101％，如果内容框的高度太小，没有太多的阴影图像显示，如果内容框太大，空格开始出现在框和阴影图像。

Now this works to a degree. The boxshadow image shows at the bottom of the content box which is what I would like. However as I'm using a fixed percentage of 101%, if the content box height is too small, not much of the drop shadow image gets shown, and if the content box is too big, whitespace starts to appear between the box and the shadow image.

所以无论如何，我要找的是一个跨浏览器基于CSS的解决方案，这样做正确。

So anyway, what I'm looking for is a cross-browser CSS based solution for doing this properly.

我相信这里有一个简单的答案 - 任何帮助是赞赏的！

I'm sure there is an easy answer to this - any help is appreciated!

推荐答案

与圆角相同的方法。

这篇关于将阴影应用于div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！