Home Hardware Networking Programmazione Software Domanda Sistemi
Conoscenza del computer >> Domanda >> PC Risoluzione dei problemi >> .

Come creare ombre di riquadri con CSS?

La proprietà CSS `box-shadow` aggiunge effetti d'ombra attorno a un elemento. Questo può essere utilizzato per aggiungere profondità e dimensione a un elemento o per farlo risaltare dal resto del contenuto di una pagina.

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. È possibile utilizzare qualsiasi valore di colore CSS valido.

Ecco alcuni esempi di come utilizzare la proprietà `box-shadow` per creare diversi tipi di ombre:

- Per creare un'ombra esterna semplice, utilizza un valore di offset positivo e un valore di sfocatura basso, come questo:

```css

scatola-ombra:5px 5px 5px #888888;

```

- Per creare un'ombra più morbida, aumenta il valore di sfocatura, in questo modo:

```css

scatola-ombra:5px 5px 10px #888888;

```

- Per creare un'ombra più ampia, aumenta il valore di diffusione, in questo modo:

```css

scatola-ombra:5px 5px 10px 5px #888888;

```

- Per creare un'ombra colorata, specifica un valore di colore, in questo modo:

```css

box-ombra:5px 5px 10px 5px rosso;

```

La proprietà "box-shadow" è un potente strumento che può essere utilizzato per creare una varietà di effetti visivi. Sperimenta valori diversi per vedere cosa puoi creare!

 

Domanda © www.354353.com