箱影：隱藏頂部的影子

Question

我讀過這裏的10個問題，不能將它們應用於我的情況。

我創建了這裏的例子

http://jsfiddle.net/Y4uHm/4/

我需要隱藏的內容框的頂部一側的陰影。 我不知道我是否做得對，或者我應該以其他方式調整圖像。 我相信它可以用比使用背景創建側面陰影更聰明的方式完成。 謝謝。

爲了滿足規則：

HTML代碼

<div class="container-wrapper"> 
    blahblah header is here 
</div> 
<div class="container-wrapper breadcrumbz"> 
    <div class="pusher"></div> <!-- only for experiment. i know about margins and paddings :) --> 
    <div class="content"> 
     There should be no shadow on top of this block 
    </div> 
</div>  

CSS

body { 
    background: #4ca8cb; 
} 
.container-wrapper { 
    margin: 0 auto; 
    max-width: 500px; 
    padding:0 50px; 
} 

.breadcrumbz { 
    background: url('https://dl.dropboxusercontent.com/u/14562883/shadowline.png') no-repeat top center; 
} 
.pusher { 
    height: 14px; 
} 
.content { 
    box-shadow: 0px 0px 3px 1px #555; 
    background-color: #e7eaeb; 
    height: 200px; 
} 

更新

我已經解決了。 解決方案需要改進，但我得到了方法。

我能 「下的」 使用

position:relative 

和負距移動墊塊

http://jsfiddle.net/Y4uHm/7/

Answer 1

可以使用:before pseudoelement

 .content { 
      background-color: #e7eaeb; 
      height: 200px; 
      position: relative; 
     } 
     .content::before { 
      content: ""; 
      position: absolute; 
      width: 100%; 
      height: 198px; 
      background-color: transparent; 
      z-index: -1; 
      box-shadow: 0px 0px 3px 1px black; 
      top: 2px; 
     }