Yo-*_*o-L 8 html css css3 css-float
我在浮动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上呈现它的阴影,是否有任何修复此问题或我是否必须尝试不同的解决方案？
问候/乔尔
Jar*_*eer 16
在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高于底部的那个.