47

我有一个带有自动建议功能的搜索框，它会在其下方弹出一个带有多个搜索字符串建议（如谷歌）的 div。是否可以在带有 CSS 的自动建议框上放置阴影，或者我需要某种脚本？我尝试了一张背景图片，但建议的数量可以从 1 到 10 或 15 不等。

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

4

6 回答 6

74

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

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

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

于 2011-02-26T16:25:41.440 回答
12

CSS3 有一个box-shadow属性。目前需要供应商前缀以获得最大的浏览器兼容性。

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

css3please提供了一个生成器。

于 2009-05-13T23:49:54.070 回答
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;
}
于 2014-12-25T07:04:20.980 回答
2

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

于 2009-05-13T23:56:24.090 回答
2

你可能想试试这个。似乎很简单，至少可以在 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] 列表是：

  • 虚线
  • 点缀
  • 双倍的
  • 槽
  • 隐
  • 插图
  • 没有任何
  • 一开始
  • 岭
  • 坚硬的
  • 继承
于 2010-03-11T05:27:32.467 回答
-1

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

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

于 2009-05-14T00:28:32.103 回答