box-shadow over floating divs
I got a problem rendering box-shadows over floating divs! Ive tested in chrome and firefox with the same result.
<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>
Edit: The div on top doesn't render its shadow on the div below, is there any fix for this problem or do I have to try a different solution?
regards /Joel
Works for me in Firefox 4, but that code will never work on chrome or safari, the -moz is a vendor tag indicating mozilla.
You need add all of the following
-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 is the vendor tag for Chrome/Safari, the following will add in drop shadows for the vendors that support it and then when it's universally supported the last rule will cover all browsers.
Edit: To get the top div's dropshadow over the other element you must position:relative and then give it a z-index higher than the bottom one.
What's wrong with them? If you're worried about not seeing the bottom shadow of the top div it's because you need a little separation. If you're having trouble seeing the box-shadow it's because you need to use vendor-specific prefixes at this stage, like so.
Demo: jsfiddle.net/q5yf3
If you want them to be stuck together, just give the first div a z-index with position:relative and it will look how you want it to.
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; }
Demo: jsfiddle.net/VaVhy
That said, I'd also recommend looking into using rgba() instead of hex values for box-shadow color as it renders the shadow a lot more naturally on non flat-colored backgrounds.
looks fine in firefox because you are using -moz-box-shadow, for webkit browsers you will have to use -webkit-box-shadow
加载中,请稍侯......
精彩评论