CSS爲兒童DIV提起了角落

我能夠使用CSS爲DIV製作提升角。這裏是jsfiddle鏈接 Here CSS爲兒童DIV提起了角落

我需要設計大量的兒童DIV也有像父母一樣提起角落。我怎樣才能做到這一點？

2012-10-15 jeewan

你在你的jsfiddle一個.lifted類。你可以在你想要的其他div中使用同一個班級。

2012-10-15 20:10:14 Simone

你能編輯小提琴並給我寫代碼。我試過你的，我沒有工作。 – jeewan

http://jsfiddle.net/Fa5x8/ – Simone

但它並沒有顯示出「小孩一」分區的擡起角落的影子。我需要在「drop-shadow lifted」類的父DIV內部創建的每個孩子中都有「提升的角落陰影」 – jeewan

理想情況下，你想你的代碼的地步Simone的答案會工作。不過，可能需要一些工作才能達到這一點。

你的第一個問題的事實，你drop-shadow和lifted類不獨立造成的。您需要將（修改的）drop-shadow類附加到您想要陰影出現的任何div，如您所見in this ugly JSFiddle。

然而，我不得不做出修改您的drop-shadow類。我所做的就是擺脫drop-shadow:before, drop-shadow:after選擇器上的'z-index'值，這是隱藏子div上的陰影。

從這一點，我們可以看到，我們需要做的第一個編輯。您需要添加

.lifted:after, 
.lifted:before { 
    position: absolute; 
    content: ""; 
}

這是必要的使陰影可見（記住，如果你不設置content的before和after pseudoelements不會顯示）。但這是不夠的。原因是因爲您的absolute定位將兩個陰影放在另一個上面。

Go to this JSFiddle並從子div添加/刪除lifted類來看看我的意思。

This JSFiddle幾乎修復它，但你應該看到this question and answer看看它爲什麼不！你應該可以使用它來解決你的問題。

2012-10-15 20:28:36 jmeas

嗨jmeas，感謝您的答案和小提琴代碼。我正在嘗試解決我的需求，但仍然無法解決問題。我也會看看你的答案的解決方案。謝謝。 – jeewan

沒問題。再一次，爲了明確聲明解決方案，你需要使用非語義代碼來堆棧元素（大概''div's），因爲':: before'和':: after'僞元素被放置在它們的父代元件。 – jmeas

回答