CSS3 propiedad box-shadow
Ejemplos
Añadiendo al elemento div sombra:
{
box-shadow: 10px 10px 5px #888888;
}
Trate »
En la parte inferior de esta página para más ejemplos.
Soporte para el navegador
Las cifras de la tabla representan el primer navegador compatible con el número de versión de la propiedad.
Inmediatamente después de la -webkit- digital, -MS- o hace -moz- en apoyo del prefijo atribuyen primer número de la versión del navegador.
propiedad | |||||
---|---|---|---|---|---|
frontera-imagen | 10.0 -webkit- | 9.0.0 | 4,0 (2,0) [3] 3.5 (1.9.1) -moz | 5.1 [1] 3.0 -webkit | 10,5 [1] -o- |
Definiciones de atributos e instrucciones
propiedad box-shadow puede establecer una o más de la caja de sombra paralela.
Por defecto: | ninguno |
---|---|
herencia: | no |
Version: | CSS3 |
la sintaxis de JavaScript: | objetar .style.boxShadow = "10px 10px 5px #888888" |
gramática
Nota: la propiedad boxShadowpara agregar uno o más de sombra al marco. La propiedad es una lista separada por comas de sombra, la sombra de cada una de 2-4 valores de longitud, un valor de color opcional y una palabra clave de inserción opcional especificado. Omitir la longitud valor es 0.
valor | explicación |
---|---|
h-sombra | Requerido. Posición de la sombra horizontal. Permitir negativo |
v-sombra | Requerido. La posición vertical de la sombra. Permitir negativo |
mancha | Opcional. Distancia Fuzzy |
propagación | Opcional. El tamaño de la sombra |
color | Opcional. color de la sombra. En los valores de color CSS para encontrar una lista completa de valores de color |
recuadro | Opcional. A partir de la sombra de la capa exterior (al principio) para cambiar la sombra interior sombra |
ejemplos en línea
Girar imagen
Este ejemplo muestra cómo crear un archivo "Polaroid" y girar la imagen.
Artículos relacionados
CSS3 tutorial: CSS3 Fronteras