Sintassi

Significato dei valori principali:

• offset-x: Spostamento orizzontale dell'ombra. Un valore positivo sposta l'ombra verso destra, un valore negativo verso sinistra.

• offset-y: Spostamento verticale dell'ombra. Un valore positivo sposta l'ombra verso il basso (bottom), mentre un valore negativo la sposta verso l'alto.

• blur-radius: Raggio di sfocatura dell'ombra. Più alto è il valore, più l'ombra diventa sfocata.

• spread-radius: Espansione dell'ombra. Un valore positivo aumenta la dimensione dell'ombra, mentre un valore negativo la riduce.

• color: Colore dell'ombra. Può essere qualsiasi valore colore valido (es. rgba(0, 0, 0, 0.5), #000000, ecc.).

Esempio proprietà: box-shadow

Codice Esempio: box-shadow

CODE: CSS

1. .box-shadow-example {

2.   width: 300px;

3.   height: 200px;

4.   background-color: #ff6347;

5.   color: white;

6.   font-size: 22px;

7.   text-align: center;

8.   padding: 40px;

9.   border-radius: 10px;

10.   box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.3); /* Ombra verso il basso */

11. }

Contenuto Esempio: box-shadow

  
  <style>
    .box-shadow-example {
      width: 300px;
      height: 200px;
      background-color: #ff6347;
      color: white;
      font-size: 22px;
      text-align: center;
      padding: 40px;
      border-radius: 10px;
      box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.3); /* Ombra verso il basso */
    }
  </style>
  
  <div class="box-shadow-example">
      Elemento con ombra verso il basso
  </div>
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser