箱影：隐藏顶部的影子

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; 
     }