浮动元素上的盒子阴影

Question

浮动元素上的盒子阴影

8

我遇到了一个问题，就是在浮动的div上渲染box-shadow时出现了问题！我已经在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 元素上边框无法显示阴影，有没有解决这个问题的方法，还是我需要尝试其他解决方案？

问候 / Joel

- Yo-L

3个回答

3

他们有什么问题？如果你担心看不到顶部

的底部阴影，那是因为你需要一点间隔。如果你看不到盒子阴影，那是因为你需要在这个阶段使用供应商特定的前缀，就像这样。

演示: jsfiddle.net/q5yf3 如果你想让它们粘在一起，只需给第一个

一个带有position:relative的z-index，它将会呈现出你想要的样子。

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的颜色，因为它在非纯色背景上会更自然地呈现阴影效果。

- Marcel

是的，我的div之间没有任何边距，我需要让它们紧密粘在一起或者至少看起来是这样。一旦我添加背景颜色，阴影就会消失。 - Yo-L

好的，我已经在第一个演示链接之后添加了与您的问题相关的答案的第二部分。 - Marcel

我会记住使用rgba()的提示，当我尝试这个时。非常感谢。 - Yo-L

1

在Firefox中看起来很好，因为你使用了-moz-box-shadow，对于Webkit浏览器，你将需要使用-webkit-box-shadow

- tcnarss

是的，我知道这个，我只是让代码保持简洁。在3.6版本中它对我不起作用。你看到两个带阴影的框还是一个？ - Yo-L

两个元素右侧都有阴影，下面的一个元素底部也有阴影。如果您想让它们都具有底部阴影，则可以稍微分隔这些div，使用“<br />”快速实现，或更改div的边距。 - tcnarss

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JaredMcAteer · Accepted Answer

在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。