在浮動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盒陰影

回答

相關問題