A maioria maneira eficaz de caixa construção sombras com CSS

Question

Estou interessado em saber qual a forma de criação de caixa de sombras com css é mais eficaz. Mas isso eu quero dizer: facilidade de implementação, flexibilidade e compatibilidade cross-browser.

Answer 1

Cebola esfola é o meu favorito pessoal.

Um exemplo pode ser encontrado neste AListApart artigo .

Answer 2

Esta é agora muito simples de alcançar:

box-shadow: 3px 3px 3px rgba(0,0,0,0.33);

Primeiro valor é o deslocamento horizontal. Segundo valor é deslocamento vertical. Terceiro valor é propagação do efeito de borrão. Fourth Value é a cor.

Além disso, você pode adicionar outro valor de inset, o que tornará a sombra aparecer no interior de você bloquear elemento:

box-shadow: 3px 3px 3px rgba(0,0,0,0.33) inset;

Esta é agora muito bem apoiado: https://caniuse.com/#feat=css- boxshadow

Answer 3

A maneira que eu acho mais eficaz atualmente é o seguinte:

As regras CSS necessário:

    .shadow{
      position:relative;
      display:block;
      background-color:#bbb;
      border:1px solid black;
    }

    .shadowed_item{
        position:relative;
        border:1px solid black;
        background-color:white;
        top:-5px;
        left:-5px;
    }

código HTML em que o CSS é aplicado:

<div class='shadow'>
    <div class='shadowed_item'>I have a shadow.</div>
</div>

Eu achei muito simples de implementar, flexível e funciona da mesma em 3 de FF, IE 6 e 7.