Ejemplo
Añadir una caja-sombra a un <div> elemento:
div
{
box-shadow: 10px 10px 5px #888888;
}
Inténtalo tú mismo " Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
La propiedad box-shadow concede uno o más sombras a un elemento.
| Valor por defecto: | none |
|---|---|
| Heredado: | no |
| animatable: | yes. Read about animatable Try it |
| Versión: | CSS3 |
| la sintaxis de JavaScript: | object .style.boxShadow="10px 20px 30px blue" Try it |
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos por -webkit- o -moz- especifican la primera versión que funcionaba con un prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| box-shadow | 10.0 4.0 -webkit- | 9.0 | 4.0 3.5 -moz- | 5.1 3.1 -webkit- | 10.5 |
sintaxis CSS
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit; Note: La propiedad box-shadow concede uno o más sombras a un elemento. La propiedad es una lista separada por comas de las sombras, cada uno especificado por 2-4 valores de longitud, un color opcional, y una palabra clave de inserción opcional. longitudes omitidas son 0.
Valores de propiedad
| Valor | Descripción | Juegalo |
|---|---|---|
| none | Valor por defecto. No se muestra ninguna sombra | Juegalo " |
| h-shadow | Necesario. La posición de la sombra horizontal. Los valores negativos se les permite | Juegalo " |
| v-shadow | Necesario. La posición de la sombra vertical. Los valores negativos se les permite | Juegalo " |
| blur | Opcional. La distancia borroso | Juegalo " |
| spread | Opcional. El tamaño de la sombra. Los valores negativos se les permite | Juegalo " |
| color | Opcional. El color de la sombra. El valor por defecto es negro. Mira valores de color CSS para obtener una lista completa de los posibles valores de color. Nota: En Safari (on PC) se requiere que el parámetro de color. Si no especifica el color, la sombra no se muestra en absoluto. | Juegalo " |
| inset | Opcional. Cambia la sombra de una sombra exterior (outset) de una sombra interior | Juegalo " |
| initial | Establece esta propiedad a su valor por defecto. Lea acerca inicial | Juegalo " |
| inherit | Hereda esta propiedad de su elemento padre. Lee sobre heredar |
Más ejemplos
Imágenes proyectadas sobre la mesa
Este ejemplo muestra cómo crear "polaroid" imágenes y rotar las imágenes.
Páginas relacionadas
CSS3 tutorial: CSS3 Fronteras
Referencia HTML DOM: boxShadow property