이 CSS 효과는 어떻게할까요?

Question

순수한 CSS를 사용하여 어떻게 그림자 효과를 낼 수 있을지 궁금합니다. 어떤 사람이 나에게 팁을 줄 수 있다면.

Answer 1

내 아이디어.

http://jsfiddle.net/dBcAE/1/

CSS :

body { 
    background-color: silver; 
} 

#alfa { 
    padding: .5em; 
    background-color: orange; 
    border-radius: 1em 1em 0 0; 
    border-top: solid .5em white; 
    border-left: solid .5em white; 
    border-right: solid .5em white; 
    margin-left: .5em; 
    margin-right: .5em; 
} 

#wita { 
    margin-top: 1em; 
    height: 1px; 
    box-shadow: 0 -1em 4px black; 
} 

HTML :

<div id='alfa'> 
    Alfa 
</div> 
<div id='wita'> 

</div> 

멋진 그림자를 만들려면, 내가 그것을 위해 별도의 사업부를 만들었습니다.

Answer 2

어느 둥근 배경을 추가하거나하여 :

-moz-box-shadow: 0 0 1em white; 
-webkit-box-shadow: 0 0 1em white; 
     box-shadow: 0 0 1em white; 

마지막 하나는 브라우저 호환성 제한이 있습니다.