你会如何做这个CSS效果？(How would you do this CSS effect?)

你会如何做这个CSS效果？(How would you do this CSS effect?)

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

I wonder how I could do this shadow effect using pure CSS ? If some one can give me tips.

最满意答案

我的想法。

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。

My idea.

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>

To make a nice shadow, I've created an additional div for it.