La proprietà "box-shadow" accetta fino a quattro valori, che specificano l'offset, la sfocatura e la diffusione dell'ombra, nonché il colore dell'ombra.
1. Spostamento :I valori di offset specificano la distanza orizzontale e verticale dell'ombra dall'elemento. I valori positivi spostano l'ombra a destra e in basso, mentre i valori negativi spostano l'ombra a sinistra e in alto.
2. Sfocatura :Il valore di sfocatura specifica la quantità di sfocatura applicata all'ombra. Un valore di sfocatura più alto creerà un'ombra più morbida, mentre un valore di sfocatura più basso creerà un'ombra più nitida.
3. Diffusione :Il valore di diffusione specifica la quantità di diffusione applicata all'ombra. Un valore di diffusione più alto creerà un'ombra più ampia, mentre un valore di diffusione più basso creerà un'ombra più stretta.
4. Colore :Il valore del colore specifica il colore dell'ombra. Puoi utilizzare qualsiasi valore di colore CSS valido, ad esempio un colore con nome, un valore esadecimale o un valore RGB.
Ecco alcuni esempi di come utilizzare la proprietà `box-shadow` per creare diversi tipi di ombre:
- Ombra di base :
```css
scatola-ombra:5px 5px 5px #888888;
```
Ciò creerà un'ombra con un offset di 5 pixel in entrambe le direzioni orizzontale e verticale, con una sfocatura di 5 pixel e una diffusione di 5 pixel. L'ombra sarà una tonalità di grigio.
- Ombra inserita :
```css
box-ombra:inserto 5px 5px 5px #888888;
```
Ciò creerà un'ombra inserita, il che significa che l'ombra verrà disegnata all'interno dell'elemento anziché all'esterno. L'ombra avrà la stessa dimensione e forma dell'elemento e sarà una tonalità di grigio.
- Ombre multiple :
```css
scatola-ombra:5px 5px 5px #888888, 10px 10px 10px #444444;
```
Ciò creerà due ombre, una con un offset e una sfocatura maggiori rispetto all'altra. Le ombre saranno entrambe sfumature di grigio, ma la seconda ombra sarà più scura della prima.
Puoi utilizzare la proprietà "box-shadow" per creare un'ampia varietà di ombre, che possono essere utilizzate per aggiungere profondità e dimensione ai tuoi progetti. Sperimenta valori diversi per vedere quali effetti puoi creare.
Domanda © www.354353.com