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. Se puede utilizar cualquier valor de color CSS válido.
Aquí hay algunos ejemplos de cómo usar la propiedad `box-shadow` para crear diferentes tipos de sombras:
- Para crear una sombra paralela simple, utilice un valor de desplazamiento positivo y un valor de desenfoque bajo, como este:
```css
sombra de cuadro:5px 5px 5px #888888;
```
- Para crear una sombra más suave, aumente el valor de desenfoque, así:
```css
sombra de cuadro:5px 5px 10px #888888;
```
- Para crear una sombra más amplia, aumente el valor de extensión, así:
```css
sombra de cuadro:5px 5px 10px 5px #888888;
```
- Para crear una sombra de color, especifique un valor de color, como este:
```css
sombra de cuadro:5px 5px 10px 5px rojo;
```
La propiedad "box-shadow" es una herramienta poderosa que se puede utilizar para crear una variedad de efectos visuales. ¡Experimente con diferentes valores para ver qué puede crear!