Per applicare un’ombra esterna a un elemento con CSS, è possibile utilizzare la proprietà `box-shadow`. Questa proprietà permette di applicare una o più ombre a un elemento.
Ecco un esempio di come applicare un’ombra esterna a un elemento:
```
div {
width: 300px;
height: 200px;
background-color: #5DBB63;
box-shadow: 10px 10px 5px grey;
}
```
Nel codice di cui sopra, la proprietà `box-shadow` è impostata con tre valori:
- Il primo valore di `10px` è la posizione orizzontale dell’ombra.
- Il secondo valore di `10px` è la posizione verticale dell’ombra.
- Il terzo valore di `5px` è il raggio sfocato dell’ombra. Maggiore è il numero, più diffusa sarà l’ombra.
- L’ultimo valore è il colore dell’ombra.
Puoi anche aggiungere un quarto valore per specificare il raggio dello spread dell’ombra. Per esempio:
```
div {
width: 300px;
height: 200px;
background-color: #5DBB63;
box-shadow: 10px 10px 5px 2px grey;
}
```
In questo caso, `2px` è il raggio dello spread dell’ombra. Un valore positivo aumenterà la dimensione dell’ombra, un valore negativo la ridurrà.
