
Una propiedad del box-shadow en CSS es que describe el efecto de las sombras en un elemento, y se pueden agregar una o más sombras usando esta propiedad. La propiedad box-shadow
nos permite crear sombras a partir del marco de todos los elementos, y si la propiedad border-radius
se establece en un elemento con esta propiedad.
Las sombras tomarán la forma de bordes redondeados y el orden de las z-index
sombras de los elementos (box-shadow
) es el igual que el orden de las sombras del texto (text-shadow
). La imagen del marco no afectará border-image
la forma de la sombra, si la hay.
Funciones box-shadow en css
Valor inicial | none |
---|---|
aplicado a | Todos los artículos. |
heredable | No |
móvil | Sí |
medios de comunicación | Visible |
Valor calculado | También especificado, con longitudes relativas convertidas a colores absolutos y específicos calculados. |
/* offset-x | offset-y | color */ box-shadow: 60px -16px teal; /* offset-x | offset-y | blur-radius | color */ box-shadow: 10px 5px 5px black; /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* inset | offset-x | offset-y | color */ box-shadow: inset 5em 1em gold; /* Cualquier número de sombras puede ser especificado por separándolos con una coma */ box-shadow: 3px 3px red, -1em 0 0.4em olive; /* Palabras clave globales */ box-shadow: inherit; box-shadow: initial; box-shadow: unset;
Ejemplos y aplicaciones
Intentaremos diferentes valores y estados usando doce <div>
de los siguientes ejemplos:
- El primer ejemplo es un ejemplo simple en el que asignamos dos valores a la propiedad
box-shadow
, el valor del desplazamiento en el eje x y en el eje y, observe lo nítidos que se ven los bordes de la sombra. - El segundo ejemplo es similar al primero, pero con el color de la sombra rojo.
- El tercer ejemplo es similar al segundo, pero con un valor especificado
<blur-radius>
para agregar un efecto de desenfoque. - El cuarto ejemplo es similar al tercero, pero con un valor agregado
<spread-radius>
para aumentar la propagación de la sombra. - El ejemplo 5 hace que la sombra (dorada) esté directamente detrás del objeto pero le da un efecto de desenfoque.
- El sexto ejemplo es similar al anterior pero con la palabra reservada utilizada
inset
para hacer que la sombra sea interna. - El séptimo ejemplo trata sobre el uso de dos valores de propiedad
box-shadow
. - Los ejemplos 8 y 9 son similares a los ejemplos anteriores, pero con
<color>
un color transparente seleccionado . - El ejemplo 10 muestra cómo usar la propiedad
box-shadow
para agregar un efecto a un elemento. - Los ejemplos undécimo y segundo muestran cómo se vería la sombra con el uso de
border-radius
.
Código HTML:
<div class="ex1"> box-shadow: 2px 6px; </div> <div class="ex2"> box-shadow: 2px 6px red; </div> <div class="ex3"> box-shadow: 2px 4px 10px red; </div> <div class="ex4"> box-shadow: 2px 4px 10px 4px red; </div> <div class="ex5"> box-shadow: 0 0 1em gold; </div> <div class="ex6"> box-shadow: inset 0 0 1em gold; </div> <div class="ex7"> box-shadow: inset 0 0 1em gold, 0 0 1em red; </div> <div class="ex8"> box-shadow: 0px 0px 5px rgba(0, 0, 0, .2); </div> <div class="ex9"> box-shadow: 5px 5px 10px rgba(0,0,0,0.3); </div> <div class="ex10"> box-shadow: inset 1px 1px 100px #000; </div> <div class="ex11"> border-radius: 15px; <br> box-shadow: 2px 6px; </div> <div class="ex12"> border-radius: 5px / 7px; <br> box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); </div>
Código CSS:
div { padding: 1em; margin: 1em; background-color: #f8f9fa; } .ex1 { box-shadow: 2px 6px; } .ex2 { box-shadow: 2px 6px red; } .ex3 { box-shadow: 2px 4px 10px red; } .ex4 { box-shadow: 2px 4px 10px 4px red; } .ex5 { box-shadow: 0 0 1em gold; } .ex6 { box-shadow: inset 0 0 1em gold; } .ex7 { box-shadow: inset 0 0 1em gold, 0 0 1em red; } .ex8 { box-shadow: 0px 0px 5px rgba(0, 0, 0, .2); } .ex9 { box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); } .ex10 { box-shadow: inset 1px 1px 100px #000; } .ex11 { border-radius: 15px; box-shadow: 2px 6px; } .ex12 { border-radius: 5px / 7px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); }
Soporte de navegadores
Característica | Chrome | Firefox | IE | Ópera | Safari |
---|---|---|---|---|---|
Soporte básico | 10 | 4 | 9 | 10,5 | 5.1 |
Características generales
Para determinar el valor de uno de los tonos, puede usar:
- Dos, tres o cuatro valores longitudinales
<length>
:- Si se especifican dos valores, se interpretan como los valores de desplazamiento en el eje xy el eje y respectivamente (
<offset-x>
y<offset-y>
). - Si se especifica un tercer valor, se interpretará como el radio del efecto de desenfoque (
<blur-radius>
). - Si se especifica un cuarto valor, se interpretará como el radio de expansión (
<spread-radius>
).
- Si se especifican dos valores, se interpretan como los valores de desplazamiento en el eje xy el eje y respectivamente (
- La palabra reservada se puede proporcionar
inset
opcionalmente. - Opcionalmente
<color>
, se puede proporcionar un valor de color .
inset
Si no se especifica este valor, se supone que la sombra es una sombra paralela (es decir, el elemento se eleva por encima del contenido detrás de él y tiene una sombra).
Si encuentra esta palabra reservada, hará la sombra dentro del marco del elemento, es decir, si el elemento se coloca en un cuadro y tiene una sombra al frente, esta sombra se dibujará dentro del marco del elemento (incluso si el marco es transparente) y sobre el fondo, pero debajo del contenido.
<offset-x> o <offset-y>
Dos valores longitudinales que establecen <length>
la distancia entre la sombra y el objeto. El valor <offset-x>
establece el desplazamiento horizontal y los valores negativos harán que la sombra aparezca en el extremo izquierdo del elemento.
Mientras que un valor <offset-y>
ajusta el desplazamiento vertical, los valores negativos harán que la sombra aparezca sobre el elemento. Si ambos valores son 0, la sombra se ubicará directamente detrás del objeto (pero puede tener un efecto de desenfoque si el valor <blur-radius>
o <spread-radius>
).
<blur-radius>
Este es el tercer valor aceptado por la propiedad box-shadow css. Cuanto mayor sea el valor, mayor será el efecto de desenfoque, por lo que la sombra será más grande y más reveladora. No se permiten valores negativos.
El valor predeterminado es 0
(es decir, el borde de la sombra es «nítido»). La especificación no proporciona un algoritmo exacto para calcular el radio del efecto de desenfoque. Depende de los navegadores.
<spread-radius>
Este es el cuarto valor aceptado por la propiedad box-shadow
, y los valores positivos harán que la sombra se expanda y se agrande, y los valores negativos harán que la sombra se encoja y encoja, y si no se especifica este valor, será 0
(que es decir , el tamaño de la sombra seguirá siendo el mismo).
<color>
Color de sombra, consulte la página de valores <color>
para obtener detalles sobre los métodos para determinar este valor. Tenga en cuenta que si no se especifica este valor, el color utilizado dependerá del navegador y su valor suele ser igual al valor de la propiedad color
(es decir currentColor
), pero tenga en cuenta que Safari muestra una sombra transparente si no se especifica este valor.
Estructura
box-shadow: none | <shadow>#;
La palabra reservada inset
se puede especificar en cualquier lugar:
<shadow> = inset? && <length>{2,4} && <color>?
- Introducción al Lenguaje de Programación CSS
- Características text-decoration-style en CSS
- Características text-decoration-line en CSS
- Características text-decoration-color en CSS
- Características text-decoration en CSS
- Características text-align-last en CSS
- Características text-align en CSS
- Características tab-size en CSS
- Características overflow-wrap en CSS
- Características line-break en CSS
- Características letter-spacing en CSS
- Características direction en CSS
- Características line-height en CSS
- Características font-style en CSS
- Características font-weight en CSS
- Características font-stretch en CSS
- Características font en CSS
- Características font-size-adjust en CSS
- Características font-size en CSS
- Características font-kerning en CSS
- Características font-family en CSS
- Características order en CSS
- Características justify-content en CSS
- Características flex-wrap en CSS
- Características flex-shrink en CSS
- Características flex-grow en CSS
- Características flex-flow en CSS
- Características flex-direction en CSS
- Características flex-basis en CSS
- Características flex en CSS
- Características align-self en CSS
- Características align-items en CSS
- Características align-content en CSS
- Características overflow-y en CSS
- Características overflow-x en CSS
- Características overflow en CSS
- Características padding-right en CSS
- Características padding-left en CSS
- Características padding-bottom en CSS
- Características margin-top en CSS
- Características padding-top en CSS
- Características margin-right en CSS