微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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高.

原文地址:https://www.jb51.cc/css/214148.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。