我有一个问题,渲染盒子阴影超过浮动div!
我在chrome和firefox中测试了相同的结果.
我在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是Chrome / Safari的供应商标签,以下将为支持它的供应商添加阴影,然后在普遍支持的情况下,最后一条规则将涵盖所有浏览器.
编辑:要获取顶部div的阴影超过另一个元素,您必须放置:relative,然后给它一个比下面的z-index高.