この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> 

は素敵な影を作るために、私はそれのための追加のdivを作成しました。

Answer 2

どちらの丸い背景を追加すること、またはによって：

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

最後の1は、ブラウザの互換性の制限があります。