Как бы вы сделали этот эффект 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.