框阴影在浮动div [英] box-shadow over floating divs
问题描述
我有一个问题渲染框阴影浮动div！
Ive在chrome和firefox中测试了相同的结果。
< html&
< head>
< / head>
< body>
< div style =float：left; clear：left; background-color：#aaa; -moz-box-shadow：0px 8px 8px＃000; width：200px; height：200px;>
< / div>
< div style =float：left; clear：left; background-color：#aaa; -moz-box-shadow：0px 8px 8px＃000; width：200px; height：200px;>
< / div>
< / body>
< / html>
编辑：顶部的div不会在下面的div上渲染它的阴影，
< >解决方案
在Firefox 4中适用于我，但该代码永远不会在chrome或safari上工作， -moz 是一个供应商标记，表示mozilla
您需要添加以下所有内容
-moz- box-shadow：0px 8px 8px＃000; width：200px;
-webkit-box-shadow：0px 8px 8px＃000; width：200px;
box-shadow：0px 8px 8px＃000; width：200px;
-webkit / Safari，以下将为支持它的供应商添加下拉阴影，然后当它得到普遍支持时，最后一条规则将覆盖所有浏览器。
编辑： top div的dropshadow超过其他元素你必须 position：relative ，然后给它一个 z-index 高于底部一个。
I got a problem rendering box-shadows over floating divs! Ive tested in chrome and firefox with the same result.
<html>
<head>
</head>
<body>
<div style="float:left; clear: left; background-color: #aaa; -moz-box-shadow: 0px 8px 8px #000; width: 200px; height: 200px;">
</div>
<div style="float:left; clear: left; background-color: #aaa; -moz-box-shadow: 0px 8px 8px #000; width: 200px; height: 200px;">
</div>
</body>
</html>
Edit: The div on top doesn't render its shadow on the div below, is there any fix for this problem or do I have to try a different solution?
regards /Joel
Works for me in Firefox 4, but that code will never work on chrome or safari, the -moz is a vendor tag indicating mozilla.
You need add all of the following
-moz-box-shadow: 0px 8px 8px #000; width: 200px;
-webkit-box-shadow: 0px 8px 8px #000; width: 200px;
box-shadow: 0px 8px 8px #000; width: 200px;
-webkit is the vendor tag for Chrome/Safari, the following will add in drop shadows for the vendors that support it and then when it's universally supported the last rule will cover all browsers.
Edit: To get the top div's dropshadow over the other element you must position:relative and then give it a z-index higher than the bottom one.
这篇关于框阴影在浮动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
