La propiedad `box-shadow` toma hasta cuatro valores, que especifican el desplazamiento, el desenfoque y la extensión de la sombra, y el color de la sombra.
1. Compensación :Los valores de desplazamiento especifican la distancia horizontal y vertical de la sombra desde el elemento. Los valores positivos mueven la sombra hacia la derecha y hacia abajo, mientras que los valores negativos mueven la sombra hacia la izquierda y hacia arriba.
2. Desenfocar :El valor de desenfoque especifica la cantidad de desenfoque aplicado a la sombra. Un valor de desenfoque más alto creará una sombra más suave, mientras que un valor de desenfoque más bajo creará una sombra más nítida.
3. Difundir :El valor de extensión especifica la cantidad de extensión aplicada a la sombra. Un valor de dispersión más alto creará una sombra más amplia, mientras que un valor de dispersión más bajo creará una sombra más estrecha.
4. Color :El valor del color especifica el color de la sombra. Puede utilizar cualquier valor de color CSS válido, como un color con nombre, un valor hexadecimal o un valor RGB.
Aquí hay algunos ejemplos de cómo usar la propiedad `box-shadow` para crear diferentes tipos de sombras:
- Sombra básica :
```css
sombra de cuadro:5px 5px 5px #888888;
```
Esto creará una sombra con un desplazamiento de 5 píxeles tanto en dirección horizontal como vertical, un desenfoque de 5 píxeles y una extensión de 5 píxeles. La sombra será de un tono gris.
- Sombra insertada :
```css
sombra de cuadro:inserción 5px 5px 5px #888888;
```
Esto creará una sombra insertada, lo que significa que la sombra se dibujará dentro del elemento en lugar de fuera de él. La sombra tendrá el mismo tamaño y forma que el elemento y será de un tono gris.
- Múltiples sombras :
```css
sombra de cuadro:5px 5px 5px #888888, 10px 10px 10px #444444;
```
Esto creará dos sombras, una con mayor desplazamiento y desenfoque que la otra. Ambas sombras serán tonos de gris, pero la segunda sombra será más oscura que la primera.
Puede utilizar la propiedad `box-shadow` para crear una amplia variedad de sombras, que pueden usarse para agregar profundidad y dimensión a sus diseños. Experimente con diferentes valores para ver qué efectos puede crear.