在一个 div 容器上添加阴影效果？

Question

我有一个搜索框，带有自动建议功能，它会在下方弹出一个带有多个搜索字符串建议的div（类似于Google）。是否可以使用CSS在自动建议框上添加阴影，或者需要某种脚本？我试过背景图像，但是建议数量可能从1到10或15不等。

如果可能的话，我更喜欢能在IE6+和FF2+中工作的解决方案。谢谢！

- Mike

Answer 1

这对我在所有浏览器上都有效：

.shadow {
-moz-box-shadow: 0 0 30px 5px #999;
-webkit-box-shadow: 0 0 30px 5px #999;
}

只需将任何div赋予阴影类，不需要使用jQuery。

- Scott H

---

我发现这个网站有很多不同阴影效果的好例子：http://www.css3.info/preview/box-shadow/ - Darcy

单独使用 box-shadow 在 IE9 上不起作用？ - Jonathan Henson

在最新版本的主流浏览器中，box-shadow应该能够正常工作，不再需要使用任何厂商前缀。 - Simon Verbeke

补充Simon Verbeke的评论，直到我从-moz-box-shadow切换到box-shadow，火狐浏览器中的盒子阴影才能正常工作。+1！ - kyle

Answer 2

CSS3有一个box-shadow属性。目前为了最大化浏览器兼容性，需要使用厂商前缀。

div.box-shadow {
    -webkit-box-shadow: 2px 2px 4px 1px #fff;
    box-shadow: 2px 2px 4px 1px #fff;
}

在 css3please 网站上有一个生成器。

- alex

---

请注意，为了使绝对定位正常工作，自动建议框必须被绝对或相对地定位。 - Andrew Noyes

如果我无法为自动建议框设置固定高度怎么办？建议的数量范围从1到15。 - Mike

Answer 3

.shadow {
    -moz-box-shadow:    3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow:         3px 3px 5px 6px #ccc;
}

- Biswadeep Sarkar

Answer 4

你可以尝试这个方法。看起来相当简单，并且至少在IE6和Moz上有效。

<div id ="show" style="background-color:Silver;width:100px;height:100px;visibility:visible;border-bottom:outset 1px black;border-right:outset 1px black;" ></div>

一般的语法是： border-[位置]：[边框样式] [边框宽度] [边框颜色] | 继承

可用的[边框样式]列表如下：

- dashed - dotted - double - groove - hidden - inset - none - outset - ridge - solid - inherit

- The Machine

---

只是添加边框，不会产生阴影效果。 - Si8

Answer 5

最广泛兼容的做法可能是在自动建议框下面创建一个大小与框本身相同的第二个div，向下和向右移动几个像素。如果您使用了一个相当现代的框架，使用JS来创建和定位它不应该太困难。

- Brant Bobby

---

是的，你可以用正确的背景图像制作任何形状的漂亮主框，并制作一个相同形状的全黑色框以获得阴影效果，并调整不透明度以获得所需效果。 - Diodeus - James MacFarlane

Answer 6

你可以尝试使用PNG投影阴影。但是IE6不支持，不过它会优雅降级。

http://www.positioniseverything.net/articles/dropshadows.html

- KevMo