css-box-shadow在浮动div上

我有一个问题,渲染盒子阴影超过浮动div！
我在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高.

css-box-shadow在浮动div上

解决方法

相关文章