Question

我在浮动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上呈现它的阴影，是否有解决此问题的方法，或者我是否必须尝试不同的解决方案？

问候 /乔尔

Answer 1

在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对其他元素的影响，您必须position:relative然后将其设置为高于底部的z-index。

Answer 2

他们有什么问题？如果你担心没有看到顶部div的底部阴影，那是因为你需要一点分离。如果您在查看盒子阴影时遇到问题，因为您需要在此阶段使用特定于供应商的前缀，如此。

演示：jsfiddle.net/q5yf3

如果您希望将它们粘在一起，只需将第一个div z-index与position:relative放在一起，它就会显示您想要的效果。

<强> HTML：

<div class="bs up"></div>
<div class="bs"></div>

<强> CSS：

div.bs {
    float:left;
    clear:left;
    margin:1em;
    width:200px;
    height:200px;
    background:#aaa;
    box-shadow:0 8px 8px #000;
    -moz-box-shadow:0 8px 8px #000;
    -webkit-box-shadow:0 8px 8px #000;
}
div.up { z-index:10; position:relative; }

演示：jsfiddle.net/VaVhy

也就是说，我还建议使用rgba()代替box-shadow颜色的十六进制值，因为它会在非平面背景上更自然地渲染阴影。

Answer 3

在Firefox中看起来很好，因为您使用的是-moz-box-shadow，对于webkit浏览器，您必须使用-webkit-box-shadow

Answer 4

给这个教程一个

http://www.positioniseverything.net/articles/dropshadows2.html

：）

浮动div上的box-shadow

4 个答案: