Atributo box-shadow CSS

Definición y uso

La propiedad box-shadow agrega una o más sombras al cuadro.

Consejo:¡Use las propiedades border-image-* para construir botones atractivos y escalables!

Véase también:

Tutorial de CSS3:Borde de CSS3

Manual de referencia de HTML DOM:Propiedad boxShadow

Ejemplo

Agregar box-shadow al elemento div:

div
{
box-shadow: 10px 10px 5px #888888;
}

Prueba por tu cuenta

Hay más ejemplos en la parte inferior de la página.

Sintaxis de CSS

box-shadow: h-shadow v-shadow blur spread color inset;

Notas:La propiedad box-shadow agrega una o más sombras al cuadro. Esta propiedad es una lista de sombras separadas por comas, cada una de las cuales se define por 2-4 valores de longitud, valores de color opcionales y una palabra clave opcional de inset. Los valores omitidos son 0.

Valor del atributo

Valor Descripción Pruebas
h-shadow Obligatorio. Posición horizontal de la sombra. Permite valores negativos. Pruebas
v-shadow Obligatorio. Posición vertical de la sombra. Permite valores negativos. Pruebas
blur Opcional. Distancia de desvanecimiento. Pruebas
spread Opcional. Tamaño de la sombra. Pruebas
color Opcional. Color de la sombra. Consulte los valores de color CSS. Pruebas
inset Opcional. Cambiar la sombra externa (outset) por la sombra interna. Pruebas

Detalles técnicos

Valor por defecto: none
Herencia: no
Versión: CSS3
Sintaxis de JavaScript: object.style.boxShadow="10px 10px 5px #888888"

Más ejemplos

La imagen lanzada sobre la mesa
Este ejemplo muestra cómo crear una imagen de Polaroid y girar la imagen.

Compatibilidad del navegador

Los números en la tabla indican la primera versión del navegador que admite completamente la propiedad.

Los números con -webkit- o -moz- indican la primera versión con prefijo utilizada.

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 9.0 4.0
3.5 -moz-		 5.1
3.1 -webkit-		 10.5