La forma más efectiva de construir sombras de caja con CSS

Question

Me interesa saber qué forma de crear sombras de caja con css es más efectiva. Pero a eso me refiero: facilidad de implementación, flexibilidad y compatibilidad entre navegadores.

Answer 1

El pelado de cebolla es mi favorito personal.

Se puede encontrar un ejemplo en este artículo de alistapart .

Answer 2

Esto es ahora muy sencillo de lograr:

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

El primer valor es el desplazamiento horizontal. El segundo valor es el desplazamiento vertical. El tercer valor es la propagación del efecto de desenfoque. El cuarto valor es el color.

Además, puede agregar otro valor de inserto , lo que hará que la sombra aparezca en el interior del elemento de bloque:

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

Esto ahora está muy bien soportado: https://caniuse.com/#feat=css- boxshadow

Answer 3

La forma en que me parece más efectiva actualmente es esta:

Las reglas CSS necesarias:

    .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 en el que se aplica el CSS:

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

Me pareció muy simple de implementar, flexible y funciona igual en FF 3, IE 6 & amp; 7.