在浮动divs盒阴影

我得到了浮动divs渲染盒阴影问题！我曾在Chrome和Firefox中测试过相同的结果。在浮动divs盒阴影

<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它的身影，是有这个问题的任何修补程序或做我必须尝试不同的解决方案？

问候 /乔尔

来源

2011-05-13 Yo-L

对我的作品在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。

来源

2011-05-13 13:33:01 JaredMcAteer

你真的有两个阴影的div？顶部的div应该在下面的div上投下阴影。我所看到的只是一个有阴影的大箱子。 – 2011-05-13 13:36:45

对不起，你的问题有点含糊。你需要相对定位你的元素，然后使用z-index来获得最高的那个。见：http://jsfiddle.net/YjPRN/ – JaredMcAteer 2011-05-13 13:40:17

Awsome：D我解决了这个问题。 – 2011-05-13 13:45:15

给本教程去

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

来源

2011-05-13 13:30:36 Rob

看起来在Firefox罚款，因为你正在使用-moz-box-shadow，对WebKit浏览器，你将不得不使用-webkit-box-shadow

来源

2011-05-13 13:33:08 tcnarss

是的，我知道这一点，我只是保持小代码。我在3.6中不适合我。你看到两个有阴影或一个盒子的盒子吗？ – 2011-05-13 13:34:41

都有右边的影子，下面的影子在底部有影子，如果你想要双方都有底部的影子，那么只要分开DIV就可以快速使用'
'或者改变DIV的边距 – tcnarss 2011-05-13 13:40:36

对不起！如上所述，我的问题有点错误。 – 2011-05-13 13:46:02

这有什么错呢？如果你担心没有看到顶部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颜色，因为它在非平面背景上使阴影更自然。

来源

2011-05-13 13:34:32 Marcel

是啊我没有任何保证金之间我的divs，我需要让他们卡住togheter或至少让他们出现如此。只要我添加背景色，阴影消失。 – 2011-05-13 13:40:12

对啊，我在第一个链接到演示后添加了第二部分，这个部分涉及到你的问题。 – Marcel 2011-05-13 13:48:28

当我试试这个时，我会牢记rgba（）提示。非常感谢。 – 2011-05-13 13:57:07

在浮动divs盒阴影

回答

相关问题