Question

我有一个带有自动建议的搜索框，会在其下方添加多个搜索字符串建议（如google）。是否有可能在CSS的自动建议框上有阴影或我需要某种类型的脚本？我尝试了背景图像，但建议的数量可以从1到10或15不等。

如果可能的话，我更喜欢在IE6 +和FF2 +中运行的东西。谢谢！

Answer 1

这适用于我的所有浏览器：

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

然后只给div任何div类，不需要jQuery。

Answer 2

CSS3具有box-shadow属性。目前需要供应商前缀以实现最大的浏览器兼容性。

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

css3please有一个生成器。

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;
}

Answer 4

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

Answer 5

你可能想试试这个。看起来很简单，至少适用于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- [postion]：[border-style] [border-width] [border-color] |继承

可用的[border-style]列表是：

虚线
点缀
双
槽
隐藏
插入
无
首先
脊
固体
继承

Answer 6

您可以尝试使用PNG阴影。 IE6不支持它，但它会很好地降级。

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

在div容器上投下阴影？

6 个答案: