Característica box-shadow en CSS

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>).
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>?