in

Propiedad de sombra de cuadro CSS

Ejemplo

Agregue sombras a diferentes elementos

:

#Ejemplo 1 {
caja de sombra: 5px 10px;
}

# example2 {
caja de sombra: 5px 10px # 888888;
}

Inténtalo tú mismo »

Más ejemplos de «Pruébelo usted mismo» a continuación.


Definición y uso

los box-shadow La propiedad adjunta una o más sombras a un elemento.


Soporte del 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 de -webkit- o -moz- especifican la primera versión que funcionó con un prefijo.

Propiedad
sombra de la caja 10.0
4.0 -kit web-
9.0 4.0
3,5 -moz-
5.1
3.1 -kit web-
10,5


Sintaxis CSS

sombra de caja: ninguna |h-offset v-offset difuminado difuminado color | recuadro | inicial | heredar;

Nota: Para adjuntar más de una sombra a un elemento, agregue una lista de sombras separadas por comas (consulte el ejemplo «Pruébelo usted mismo» a continuación).

Valores de propiedad

Valor Descripción Juegalo
ninguno Valor por defecto. No se muestra ninguna sombra Juegalo «
h-offset Requerido. El desplazamiento horizontal de la sombra. Un valor positivo coloca la sombra en el lado derecho del cuadro, un valor negativo coloca la sombra en el lado izquierdo del cuadro Juegalo «
desplazamiento en v Requerido. El desplazamiento vertical de la sombra. Un valor positivo coloca la sombra debajo del cuadro, un valor negativo coloca la sombra sobre el cuadro Juegalo «
difuminar Opcional. El radio de desenfoque. Cuanto mayor sea el número, más borrosa será la sombra Juegalo «
propagar Opcional. El radio de propagación. Un valor positivo aumenta el tamaño de la sombra, un valor negativo disminuye el tamaño de la sombra Juegalo «
color Opcional. El color de la sombra. El valor predeterminado es el color del texto. Consulte Valores de color de CSS para obtener una lista completa de los posibles valores de color.

Nota: En Safari (en PC) se requiere el parámetro de color. Si no especifica el color, la sombra no se muestra en absoluto.

Juegalo «
recuadro Opcional. Cambia la sombra de una sombra exterior (principio) a una sombra interior Juegalo «
inicial Establece esta propiedad en su valor predeterminado. Leer acerca de inicial Juegalo «
heredar Hereda esta propiedad de su elemento padre. Leer acerca de heredar

Propina: Más información sobre los valores permitidos (unidades de longitud CSS)


Más ejemplos

Ejemplo

Agrega un efecto de desenfoque a la sombra:

#Ejemplo 1 {
caja de sombra: 10px 10px 8px # 888888;
}

Inténtalo tú mismo »

Ejemplo

Defina el radio de propagación de la sombra:

#Ejemplo 1 {
caja de sombra: 10px 10px 8px 10px # 888888;
}

Inténtalo tú mismo »

Ejemplo

Defina múltiples sombras:

#Ejemplo 1 {
caja de sombra: 5px 5px azul, 10px 10px rojo, 15px 15px verde;
}

Inténtalo tú mismo »

Ejemplo

Agregue la palabra clave insertada:

#Ejemplo 1 {
caja-sombra: inserción de 5px 10px;
}

Inténtalo tú mismo »

Ejemplo

Imágenes arrojadas sobre la mesa. Este ejemplo demuestra cómo crear imágenes «polaroid» y rotar las imágenes:

div.polaroid {
ancho: 284px;

relleno: 10px 10px 20px 10px;
borde: 1px sólido #BFBFBF;
color de fondo: blanco;
sombra de cuadro: 10px 10px 5px #aaaaaa;
}

Inténtalo tú mismo »


páginas relacionadas

Tutorial de CSS: esquinas redondeadas de CSS

Referencia HTML DOM: propiedad boxShadow

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Descargas de archivos de Java – Java SE 16

Método de unión en Java – javatpoint