如何刪除2嵌套陰影在CSS中的2個分部？

我使用3個部門，第一個是頭部，第二個是主要部門，第三個是最後部分。我希望第一個部門在第二個部門放下陰影，並且我成功完成了該任務，同時我也希望主要師砸陰影第三「最後」師，但我不能做到這一點，這裏是代碼：如何刪除2嵌套陰影在CSS中的2個分部？

HTML： -

<head> 
<link rel="stylesheet" type="text/css" href="fadykamalcss.css" /> 
</head> 

<body> 

    <div id="header1"> 
    </div> 

    <div id="main"> 
    </div> 

    <div id="last"> 
    </div> 

</body>

CSS： -

body { 
    padding: 0px; 
    margin: 0px; 
} 

div#header1{ 
    width:100%; 
    height:200px; 
    background:#242d34; 
    box-shadow: 0px 8px 20px -6px black; 
} 

div#main{ 
    position:relative; 
    z-index:-1; 
    width:100%; 
    height:200px; 
    background:#ffaa05; 
    box-shadow: 0px 8px 20px -6px black; 
} 

div#last{ 
    position:relative; 
    z-index:-2 
    margin-top: -700px; 
    width:100%; 
    height:400; 
    background:#242d34; 
}

來源

2012-03-01 Fady Kamal

你在'＃last'選擇你的z-index缺少一個分號。另外，你的「高度」缺少一個單位。 http://jsfiddle.net/MYGh8/4/ – animuson 2012-03-01 21:10:52

噢，我修好了，但仍然有一個問題，最後一個分區是不可見的，影子是可見的，但最後一個分區不是，爲什麼？ – 2012-03-01 21:20:11

因爲你用'margin-top：-700px'來隱藏它。 – animuson 2012-03-01 21:21:00

你在您的CSS Fi中存在一些問題首先你錯過了一個;在z-index之後第二，你錯過了高度上的「px」：400px;

此外，你不會看到任何與保證金設置爲-700（可能是故意的）。這是它的一個鏈接，所以你可以看到它全部： http://jsfiddle.net/kEQVh/

來源

2012-03-01 21:18:16

是的，你現在是固定的，非常感謝你 – 2012-03-01 21:24:29

如何刪除2嵌套陰影在CSS中的2個分部？

回答

相關問題