box-shadow

Introducción

La propiedad CSS box-shadow  describe uno o más efectos de sombra como una lista separada por comas. Permite proyectar una sombra difuminada en la estructura de casi cualquier elemento. Si un border-radius es especificado en un elemento con un box shadow, el box shadow asume las mismas esquinas redondeadas. El orden z de multiples box shadows es igual al los multiple text shadows (la primera sombra especificado en la parte superior).

Sintaxis

box-shadow:  none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#

Valores

inset

Si no se especifica (por defecto), la sombra asume una sombra difuminada (como si la caja fuera levantada por encima del contenido).

La presencia de la palabra clave inset  cambia la sombra a una dentro del marco (como si el contenido estuviera deprimido dentro de la caja). Inset shadows dibuja dentro del borde (incluso de los transparentes), por encima del fondo, pero por debajo del contenido.

<offset-x> <offset-y>

Estos son dos valores <length> para definir el desplazamiento de la sombra. <offset-x> especifica la distancia horizontal. Los valores negativos colocan las combra a la izquierda de el elemento. <offset-y> Especifica la distancia vertical. Los valores negativos colocan la sombra por encima del elemento. Ver<length> para posibles unidades.
Si ambos valores son 0, la sombra es ubicada detras del elemento (y puede generar un efecto de difuminación <blur-radius> y/o <spread-radius> está establecido).

<blur-radius>

Este es el tercer valor <length>. Cuando mayor sea este valor, mayor sera la difuminación, por consecuencia la sombra se vuelve más grande y ligera. Los valores negativos no son permitidos. Si esto no es especificado, su valor será 0 (el borde de la sombra es fuerte).

<spread-radius>

Este es el cuarto valor <length> . Los valores positivos harán que la sombra se expanda y crezca más, los valores negativos harán que la sombra se reduzca de tamaño. Si no se especifica, este será 0 (la sombra será del mismo tamaño del elemento).

<color>

Ver los valores de <color> para las posibles palabras claves y anotaciones.
Si no se especifica, el color depende del navegador. En Gecko (Firefox), Presto (Opera) y Trident (Internet Explorer), el valor de la propiedad  color es usado.Sin embargo, La sombra de  WebKit es transparente  y por lo tanto inutil si el <color> es omitido.

Ejemplos

• prueba de box-shadow
• tutoriales y ejemplos de box-shadow

box-shadow: 60px -16px teal;

box-shadow: 10px 5px 5px black;

box-shadow: 3px 3px red, -1em 0 0.4em olive;

box-shadow: inset 5em 1em gold; 

box-shadow: 0 0 1em gold; 

box-shadow: inset 0 0 1em gold;

Especificaciones

Compatibilidad del Navegador

Notas

• Desde la versión 5.5, Internet Explorer soporta DropShadow de Microsoft y el Filtro de Shadow. Usted puede usar esta extensión propietaria de lanzar una sombra difuminada (aunque la sintaxis y efectos son diferentes de CSS3).
• Las sombras afectan a los mas antiguos Gecko, Presto, y WebKit; Por ejemplo, Si usted emite una sombra fuera de la caja con un  width de 100%, usted verá una barra de desplazamiento.
• Gecko 13 (Firefox 13) eliminó el soporte para -moz-box-shadow. Desde entonces, solo la versión sin prefijo es compatible.
• Con el fin de obtener box-shadow en IE9 a más, usted necesita establecer border-collapse a separate.