English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
box-La propiedad shadow aplica un o varios efectos de sombra al cuadro del elemento.
La tabla a continuación proporciona una descripción del uso y el historial de versiones de este atributo, así como la sintaxis de uso en scripts de JavaScript.
| valor predeterminado: | none |
|---|---|
| aplica a: | todos los elementos. También se aplica a::first-letra。 |
| heredar: | ninguno |
| animable: | es.ver propiedades de animación。 |
| versión: | CSS3nueva función |
| Sintaxis de JavaScript: | object.style.boxShadow="8px 8px 6px #000000" |
La sintaxis de este atributo es la siguiente:
box-sombra: [, , ... sombraN] | none | initial | inherit dónde está la sombra: [ [incrustado [ desplazamiento-x desplazamiento-y desvanecimiento-radio spread-radio color ] ]
Los siguientes ejemplos muestran cómo usar box-Atributo shadow.
.shadow{
ancho: 150px;
altura: 150px;
fondo: #ccc;
borde: 1px solid #999;
box-shadow: 2px 2px 4px 2px #999;
}Prueba aquí‹/›Puede usar la palabra clave inset para aplicar una sombra dentro del cuadro del elemento. La sombra incrustada se dibuja dentro del borde, por encima del fondo pero debajo del contenido del elemento.
.shadow-inside{
ancho: 150px;
altura: 150px;
fondo: #ccc;
borde: 1px solid #999;
box-shadow: inset 0 0 6px 2px #999;
}Prueba aquí‹/›La siguiente tabla describe los valores de este atributo.
| Valor | Descripción |
|---|---|
| Requerido -Debe especificar los siguientes valores para que el atributo sea válido. | |
| offset-x | La primera longitud especifica la distancia horizontal de la sombra. Los valores positivos dibujarán la sombra hacia la derecha del cuadro, mientras que los valores negativos dibujarán la sombra hacia la izquierda del cuadro. |
| offset-y | La segunda longitud especifica la distancia vertical de la sombra. Los valores positivos desplazarán la sombra hacia abajo, mientras que los valores negativos desplazarán la sombra hacia arriba del elemento. |
| Opcional -Los siguientes valores son opcionales. | |
| blur-radius | La tercera longitud es la distancia de desvanecimiento. Cuanto mayor sea este valor, mayor será el desvanecimiento, por lo que la sombra se vuelve más grande y más clara. El valor predeterminado es 0, por lo que la sombra es muy nítida. No se permite el uso de valores negativos. |
| spread-radius | La cuarta longitud es la distancia de expansión. Los valores positivos hacen que la forma de la sombra se expanda en todas las direcciones por el radio especificado. Los valores negativos hacen que la forma de la sombra se contraiga. |
| color | El color es el color de la sombra. Este valor puede ser cualquier valor soportadovalor de color。Si no se especifica, generalmente escolordel valor del atributo. |
| inset | Si existe, cambiará la sombra proyectada desde la sombra externa a la sombra interna. La sombra incrustada se dibuja dentro del borde, por encima del fondo pero debajo del contenido del elemento. |
| none | No se mostrará la sombra. Este es el valor predeterminado. |
| initial | Establezca este atributo en su valor predeterminado. |
| inherit | Si se especifica, el elemento asociado utiliza el box del elemento padre-Valores del atributo shadow. |
box-La compatibilidad del navegador del atributo shadow, los números en la siguiente tabla representan la versión mínima de los navegadores que admiten este atributo; todos los navegadores principales admiten este atributo.
|
Consulte los siguientes tutoriales:CSS3sombra，Elementos pseudo de CSS。
Atributos relacionados:text-shadow。