将阴影应用于div

我需要帮助将阴影图像应用于DIV元素的范围。有问题的元素已经有一个背景图像，所以我正在围绕他们的另一个DIV。事情变得更加复杂，因为我也在使用960gs CSS框架。将阴影应用于div

这是我的一个内容框中键入显示当前HTML：

<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 { 
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阴影-920 CSS：

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

现在这个作品到一个程度。 boxshadow图像显示在内容框的底部，这正是我想要的。但是，由于我使用101％的固定百分比，因此如果内容框高度太小，则不会显示太多的投影图像，并且如果内容框太大，则框和内容框之间会出现空格阴影图像。

所以无论如何，我正在寻找的是一个跨浏览器的CSS为基础的解决方案正确做到这一点。

我确定有一个简单的答案 - 任何帮助表示赞赏！

来源

2010-06-01 CJD

看看这个网站的各种CSS3效果，包括盒阴影（你在找什么）：http://css3please.com/

来源

2010-06-01 20:23:11 Jason

我会使用CSS3 box-shadow属性，与IE模糊滤镜上的div作为旧版浏览器的回退。

来源

2010-06-01 20:25:35

事情是，我的箱子不是一个磨坊的阴影，它是所有花式的，所以不能真正与箱子阴影属性 – CJD 2010-06-01 20:30:28

复制什么是花哨的boxshadow？ – Jason 2010-06-01 20:35:12

随着新的CSS3规范，我们得到了已被Mozilla浏览器（通过-moz-box-shadow）和Webkit浏览器（通过-webkit-box-shadow）支持的属性box-shadow。由于10.5 pre-alpha也是Opera支持这个属性的。

因此，只要您可以接受不显示Internet Explorer的阴影，您可以坚持到此属性。它背后的想法更清晰，因为没有需要的布局特定的HTML标记。

这里看到更多的信息，浏览器兼容性：http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows

对于最大支持通过大多数浏览器引擎，你应该使用以下三种语句：

box-shadow: 3px 3px 5px #000; 
-moz-box-shadow: 3px 3px 5px #000; 
-webkit-box-shadow: 3px 3px 5px #000;

来源

2010-06-01 20:32:53 stefanglase

相同的技术rounded corners。

来源

2010-06-01 21:09:04 reisio

将阴影应用于div

回答

相关问题