Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.
CSS: propiedades de la sombra del cuadro
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada sombra de la caja Con sintaxis y ejemplos.
describir
La propiedad box-shadow de CSS define el efecto de sombra de un elemento.
sintaxis
La sintaxis de la propiedad CSS box-shadow es:
box-shadow: none;o
box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color;parámetro o parámetro
ilustración
Palabra clave opcional. Es el tipo de sombra aplicada al elemento. Puede ser uno de los siguientes:
| valor | describir |
|---|---|
| ilustración | Las sombras aparecen como sombras incrustadas
El siguiente ejemplo muestra recuadro, offset-x, offset-y y color |
| <省略> | Las sombras aparecen como sombras paralelas
El siguiente ejemplo muestra offset-x, offset-y y color |
desplazamiento-x
requerido. Es la distancia horizontal, que puede ser positiva o negativa. Si offset-x es negativo, la sombra se colocará a la izquierda del elemento. Puede ser uno de los siguientes:
| valor | describir |
|---|---|
| estable | valor fijo en px, em, …
El siguiente ejemplo muestra offset-x, offset-y y color |
desplazamiento-y
requerido. Es la distancia vertical que puede ser positiva o negativa. Si offset-y es negativo, la sombra se colocará sobre el elemento. Puede ser uno de los siguientes:
| valor | describir |
|---|---|
| estable | valor fijo en px, em, …
El siguiente ejemplo muestra offset-x, offset-y y color |
radio de desenfoque
Opcional y no puede ser negativo. Cuanto mayor sea el valor del radio de desenfoque, mayor será el desenfoque. Puede ser uno de los siguientes:
| valor | describir |
|---|---|
| estable | valor fijo en px, em, …
El siguiente ejemplo muestra offset-x, offset-y, radio de desenfoque y color |
Radio de difusión
Electivo. Puede ser positivo o negativo. Los valores de radio de dispersión positivos darán como resultado sombras más grandes. Un radio de expansión negativo hará que la sombra se encoja. Puede ser uno de los siguientes:
| valor | describir |
|---|---|
| estable | valor fijo en px, em, …
El siguiente ejemplo muestra offset-x, offset-y, blur-radius, spread-radius y color |
color
Opcional, pero no aparecerá si se omite box-shadow. color es el color de la sombra del cuadro, que puede ser uno de los siguientes:
| valor | describir |
|---|---|
| #RRGGBB | Representación hexadecimal del color
El siguiente ejemplo muestra offset-x, offset-y y color |
| RGB() | Representación RGB del color
El siguiente ejemplo muestra offset-x, offset-y y color |
| nombre | El nombre del color (es decir: rojo, azul, negro, blanco)
El siguiente ejemplo muestra offset-x, offset-y y color |
notas
- La propiedad box-shadow de CSS requiere valores offset-x y offset-y.
- El valor del color no es obligatorio, pero dado que el valor predeterminado de box-shadow es transparente, box-shadow no aparecerá a menos que especifique un valor de color.
- Cuanto mayor sea el valor del radio de desenfoque, mayor será el desenfoque. El valor del radio de desenfoque no puede ser negativo.
- Los valores de radio de dispersión positivos darán como resultado sombras más grandes. Un radio de expansión negativo hará que la sombra se encoja.
- ¿Necesita convertir sus valores de color a una representación diferente? Pruebe esta herramienta en línea para convertir sus valores de color entre hexadecimal y RGB.
Compatibilidad del navegador
La propiedad box-shadow de CSS tiene soporte básico para los siguientes navegadores:
- cromo 10+
- Firefox 4+ (Geco 2+)
- Internet Explorer 9+ (IE 9+)
- Ópera 10.5+
- Safari 5.1+ (WebKit 3+)
ejemplo
Discutiremos la propiedad box-shadow a continuación, explorando ejemplos de cómo usarla en CSS.
usar proyección
Veamos un ejemplo de sombra de caja CSS para mostrar cómo crear una sombra.
div { box-shadow: 2px 3px #CCCCCC; }En este ejemplo de sombra de cuadro CSS, configuramos el
A continuación, agreguemos el radio de desenfoque a nuestra sombra de caja:
div { box-shadow: 2px 3px 5px #CCCCCC; }En este ejemplo de sombra de cuadro CSS, configuramos el
Usa sombras incrustadas
Veamos un ejemplo de sombra de caja CSS para mostrar cómo crear una sombra en línea (es decir, el contenido parece estar presionado dentro de la caja).
div { box-shadow: inset 2px 3px #CCCCCC; }En este ejemplo de sombra de cuadro CSS, configuramos el
A continuación, agreguemos el radio de desenfoque a nuestra sombra de caja:
div { box-shadow: inset 2px 3px 5px #CCCCCC; }En este ejemplo de sombra de cuadro CSS, configuramos el
No uses sombra
Veamos un ejemplo de sombra de cuadro CSS que elimina la sombra de cuadro.
div { box-shadow: none; }En este ejemplo de sombra de caja CSS, hacemos esto agregando