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.