간단한 CSS 상자 그림자

Question

나는 아래 이미지에서 그림자를 다시 시도하고있다. 그러나 나는 그것을 알아낼 수 없다.

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

그림자가 양쪽에 나타납니다 내가 달성하기 위해 노력하고있어에 비해 너무 강한 :

여기 내 코드입니다. 어떤 제안?

I이 완료 처음부터 아래 바이올린을했습니다

Answer 1

, 당신은 모든면에서 렌더링 그림자를 사용하고,

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

대신에 그것을

Demo이 inset 그림자를 사용하여 좋아하는 경우에 사용할 수 있습니다 , 오른쪽 왼쪽은 div 전체 행에 숨겨져 있으며 하단의 그림자는 divbackground: #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; 
}