你会怎么做这个CSS效果？

Question

我想知道如何使用纯CSS来做这个阴影效果？ 如果有人可以给我提示。

Answer 1

通过添加圆形背景或：

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

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

Answer 2

我的想法。

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。