Bordes con sombras

Ademas de los bordes lineales y los personalizados con imágene, podemos construir cuadros contenedores con un efecto de sombra. Para eso usaremos la propiedad box-shadow. Esta caja o bloque aparecerá como si estuviera por encima del texto de la página o deprimido, como hundido entre el texto y el fondo. Es un efecto interesante para botones (con javascript) o para paneles de notificación o para simular una tarjeta.

Un ejemplo es éste código

#cajasombra{

  background-color: #ddd;

  width: 300px;

  padding: 10px;

  box-shadow: 5px 5px 3px #333;

}

En total este nuevo efecto (box-shadow) necesita 5 atributos.

Valores del sombreado pra bordes
Atributo Uso Valor
inset Efecto de hundido bajo el texto. Es opcional  
offset-x, offset-y Distancia de la sombra al borde. Admite valores positivos y negativos. Número
blur-radius Es la cantidad de difuminado, a mayor valor mayor efecto difuminado Número
spread-radius Es el ancho de la sombra Número
color El color de la sombra. Es opcional Código de color

Los cinco valores pueden darse especificarse en el modo abreviado siguiendo el orden de la tabla para los valores numéricos.

box-shadow: 5px 5px 6px 4px #333;
este cuadro representa una caja con sombra abajo a la derecha
en este ejemplo se aplica una sombra a un bloque con borde

El sombreado puede ser util para dar una cierta idea de 3D en el documento. A mayor valor de los offset-x offset-y más elevado parece el elemento sobre el fondo. Una luz fuerte y próxima se simula con un valor bajo para el difuminado, blur-radius.