你会如何做这个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; 

最后一个具有浏览器兼容性的限制。