Html 在 div 容器上放置阴影？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/860972/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Drop shadow on a div container?
提问by Scott H
I have a searchbox with auto-suggest that pops a div up underneath it with multiple search string suggestions (like google). Is it possible to have drop shadow on the auto-suggest box with CSS or will I need a script of some sort? I tried a background image but the number of suggests can vary from 1 to 10 or 15.
我有一个带有自动建议的搜索框，它会在其下方弹出一个带有多个搜索字符串建议的 div（如 google）。是否可以使用 CSS 在自动建议框上添加阴影，或者我需要某种脚本？我尝试了背景图片，但建议的数量可以从 1 到 10 或 15 不等。
I'd prefer something that works in IE6+ and FF2+ if possible. Thanks!
如果可能的话，我更喜欢在 IE6+ 和 FF2+ 中工作的东西。谢谢！
回答by Scott H
This works for me on all my browsers:
这适用于我所有的浏览器：
.shadow {
-moz-box-shadow: 0 0 30px 5px #999;
-webkit-box-shadow: 0 0 30px 5px #999;
}
then just give any div the shadow class, no jQuery required.
然后只给任何 div 阴影类，不需要 jQuery。
回答by alex
CSS3 has a box-shadowproperty. Vendor prefixes are required at the moment for maximum browser compatibility.
CSS3 有一个box-shadow属性。目前需要供应商前缀以实现最大的浏览器兼容性。
div.box-shadow {
-webkit-box-shadow: 2px 2px 4px 1px #fff;
box-shadow: 2px 2px 4px 1px #fff;
}
There is a generator available at css3please.
在css3please有一个可用的生成器。
回答by Biswadeep Sarkar
.shadow {
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
回答by The Machine
you might want to try this. Seems to be pretty easy and works on IE6 and Moz atleast.
你可能想试试这个。似乎很简单，至少适用于 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>
The general syntax is : border-[postion]:[border-style] [border-width] [border-color] | inherit
一般语法是：border-[postion]:[border-style] [border-width] [border-color] | 继承
The list of available [border-style]s are :
可用的 [border-style] 列表是：
- dashed
- dotted
- double
- groove
- hidden
- inset
- none
- outset
- ridge
- solid
- inherit
- 虚线
- 点缀
- 双倍的
- 槽
- 隐
- 插图
- 没有任何
- 一开始
- 岭
- 坚硬的
- 继承
回答by Brant Bobby
The most widely compatible way of doing this is likely going to be creating a second div under your auto-suggest box the same size as the box itself, nudged a few pixels down and to the right. You can use JS to create and position it, which shouldn't be terribly difficult if you're using a fairly modern framework.
执行此操作的最广泛兼容的方法可能是在您的自动建议框下创建与框本身大小相同的第二个 div，向下和向右轻推几个像素。您可以使用 JS 来创建和定位它，如果您使用的是相当现代的框架，这应该不是非常困难。
回答by KevMo
You can try using the PNG drop shadows. IE6 doesn't support it, however it will degrade nicely.
您可以尝试使用 PNG 投影。IE6 不支持它，但是它会很好地降级。
http://www.positioniseverything.net/articles/dropshadows.html
http://www.positioniseeverything.net/articles/dropshadows.html
