Коробка тень: скрыть верхнюю тень

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

Update

Я решил, что. Решение необходимо улучшить, но я получил метод.

можно перемещать нижний блок "под" использованием

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