Простого CSS коробка-тень

Question

Я пытаюсь воссоздать тень с картинки в поле ниже:

Это тень между двумя цветами я пытаюсь воссоздать с помощью окна-тени. Но я не могу понять.

Вот мой код:

box-shadow: inset 0 0 2px 0px #000000; 

Тень появляется с обеих сторон и является слишком сильным по сравнению с тем, что я пытаюсь добиться. Какие-либо предложения?

Answer 1

Я сделал ниже скрипку от полного нуля, вы можете использовать его, если Вам нравится этот текст

Demo

<div class="one"></div> 
<div class="two"></div> 
<div class="three"></div> 

.one { 
    background: #B4B300; 
    height: 100px; 
} 

.two { 
    background: #FD370A; 
    height: 100px; 
    box-shadow: 0 0 5px #212121; 
} 

.three { 
    background: #fff; 
    height: 5px; 
} 

Вместо использования inset тени, я использую тень, которая делает со всех сторон , прямо слева скрыты как div охватывает всю строку, тень в нижней части скрыта с другим div использованием background: #fff;

Примечание: Я забыл добавить -moz и -webkit префиксами, поэтому не забудьте использовать их в качестве , если вы хотите также поддерживать старые браузеры.

Answer 2

http://jsfiddle.net/CQvBb/

<div class="first"></div> 
<div class="second"></div> 

.first { 
    background:#B4B300; 
    width:500px; 
    height:100px; 
    box-shadow: inset 0 -5px 5px -5px #000000; 
    -moz-box-shadow: inset 0 -5px 5px -5px #000000; 
    -webkit-box-shadow: inset 0 -5px 5px -5px #000000; 
} 
.second { 
    background:#FD370A; 
    width:500px; 
    height:100px; 
}