Css - 陰影疊加其他元素

-2

我有幾個div，每個都有一個陰影，但div的陰影總是覆蓋下一個div。Css - 陰影疊加其他元素

這裏是我的代碼： HTML：

<div> 
Some Text 
</div> 
<div> 
Some Text 
</div> 
<div> 
Some Text 
</div> 
<div> 
Some Text 
</div> 
<div> 
Some Text 
</div>

CSS：

div { 
    background-color:white; 
    text-align:center; 
    box-shadow: 0 0 3px 5px black; 
}

小提琴：https://jsfiddle.net/81t4v4a5/

我要完成類似的東西，但沒有一個容器：https://jsfiddle.net/kc98heaw/

就是這樣可能？

來源

2016-08-15 Pachu

目前尚不清楚你想要達到的目的。當容器是盒子模型的重要組成部分時，爲什麼你不願意使用容器？爲什麼每個文本行都在自己的div中，如果你只想要一個父div的樣式？第二個小提琴是否鏈接了你想要的版本？ – leigero

第二個鏈接是我想要實現的，而不使用contaienr，因爲如果所有的div都被包裝在一個容器中，我想應用一些其他的行爲，所以不能完成 – Pachu

這是你在找什麼？

小提琴：https://jsfiddle.net/y6097xso/

我試圖通過所有div迭代和繪製陰影與表達：

div { 
 
    background-color:white; 
 
    text-align:center; 
 
    box-shadow: 0 0 3px 5px black; 
 
} 
 
div:nth-child(2n){ 
 
    position: relative; 
 
    box-shadow: 9px 0 4px -4px black, -9px 0 4px -4px black; 
 
}

<div> 
 
Some Text 
 
</div> 
 
<div> 
 
Some Text 
 
</div> 
 
<div> 
 
Some Text 
 
</div> 
 
<div> 
 
Some Text 
 
</div> 
 
<div> 
 
Some Text 
 
</div>

來源

2016-08-15 18:13:12 AlliaS

幾乎，它看起來不太對，第二個孩子，你能擴展你在那裏做了什麼嗎？ – Pachu

是的，對不起，我在陰影中弄得一團糟，這個更好嗎？ – AlliaS

https://jsfiddle.net/y6097xso/ – AlliaS

Css - 陰影疊加其他元素

回答

相關問題