test.zip

CSS - Nachodzenie cienia na div'a

Witam! Mam problem z nakładającym się cieniem jednego div'a na innego - patrz poniższe zdjęcie: http://obrazki.elektroda.pl/3737508400_1408918540_thumb.jpg Div'y złote rzucają cienie, a środkowy div biały ma znajdować się nad cieniami. Na górze div'a białego wszystko jest OK, ale na dole cień nachodzi na div'a i nie mogę się go w żaden sposób pozbyć. Co zrobić? Próbowałem sterować kolejnością warstw, ale się nie udało. Poniżej źródło strony i plik w formacie HTML spakowany w formacie ZIP. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <style type="text/css"> body{ margin:0px 0px 0px 0px; text-align:center; font-size:60px; background-color:green; } #k1{ width:100%; height:200px; background-color:gold; box-shadow: 0 0 100px 50px red; z-index:1; } #k2{ width:100%; } #k3{ width:100%; height:200px; background-color:gold; box-shadow: 0 0 100px 50px blue; z-index:2; } .biale{ width:50%; height:300px; margin:10px auto 10px auto; background-color:white; z-index:3; } </style> </head> <body> <div id="k1">k1</div> <div id="k2"> <div class="biale">biale</div> </div> <div id="k3">k3</div> </body> </html>

  • test.zip
    • test.html


Pobierz plik - link do postu

test.zip > test.html

body{
margin:0px 0px 0px 0px;
text-align:center;
font-size:60px;
background-color:green;
}
#k1{
width:100%;
height:200px;
background-color:gold;
box-shadow: 0 0 100px 50px red;
}
#k2{
width:100%;
/*height:300px;*/
}
#k3{
width:100%;
height:200px;
background-color:gold;
box-shadow: 0 0 100px 50px blue;
}
.biale{
width:50%;
height:300px;
margin:10px auto 10px auto;
background-color:white;
}




k1

biale

k3