Question

我需要一些帮助将阴影图像应用于一系列DIV元素。有问题的元素已经有了背景图像，所以我在它们周围缠绕另一个DIV。事情进一步复杂化，因为我也在使用960gs CSS框架。

这是我目前用于内容框类型显示的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-shadow-920 CSS：

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

现在这在一定程度上有效。 boxshadow图像显示在内容框的底部，这是我想要的。但是，由于我使用的固定百分比为101％，如果内容框高度太小，则不会显示大量的投影图像，如果内容框太大，则框内和框之间会出现空格。阴影图像。

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

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

Answer 1

使用新的CSS3规范，我们获得了Mozilla浏览器（通过box-shadow）和Webkit浏览器（通过-moz-box-shadow）已经支持的属性-webkit-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;

Answer 2

与rounded corners相同的技巧。

Answer 3

查看此网站了解各种CSS3效果，包括框阴影（您正在寻找的内容）：http://css3please.com/

Answer 4

我使用CSS3 box-shadow属性，在div上使用IE模糊过滤器作为旧版浏览器的后备。

将阴影应用于div

4 个答案: