Esercitazione CSS

CSS CASA Introduzione CSS Sintassi CSS Selettori CSS CSS Come fare per Commenti CSS Colori CSS Sfondi CSS Confini CSS Margini CSS Imbottitura CSS Altezza/larghezza CSS Modello a scatola CSS Schema CSS Testo CSS Font CSS Icone CSS Collegamenti CSS Elenchi CSS Tabelle CSS Display CSS Larghezza massima CSS Posizione CSS Indice Z CSS Overflow CSS CSS galleggiante CSS Inline-block Allineamento CSS Combinatori CSS Pseudo-classe CSS Pseudoelemento CSS Opacità CSS Barra di navigazione CSS Menu a discesa CSS Galleria di immagini CSS Sprite di immagini CSS Selettori CSS Attr Moduli CSS Contatori CSS Layout del sito Web CSS Unità CSS Specificità CSS CSS! importante Funzioni matematiche CSS

CSS avanzato

Angoli arrotondati CSS Immagini del bordo CSS Sfondi CSS Colori CSS Parole chiave a colori CSS Gradienti CSS Ombre CSS Effetti di testo CSS Font Web CSS Trasformazioni 2D CSS Trasformazioni CSS 3D Transizioni CSS Animazioni CSS Suggerimenti CSS Immagini in stile CSS Riflessione dell'immagine CSS Adattamento agli oggetti CSS Posizione dell'oggetto CSS Mascheratura CSS Pulsanti CSS Impaginazione CSS Colonne multiple CSS Interfaccia utente CSS Variabili CSS Dimensioni della scatola CSS Query sui media CSS Esempi CSS MQ Cassetta flessibile CSS

CSS reattivo

Introduzione a RWD Vista posteriore Vista griglia RWD Query sui media RWD Immagini RWD Video RWD Quadri RWD Modelli RWD

Griglia CSS

Introduzione alla griglia Contenitore a griglia Elemento griglia

CSS SASS

Esercitazione SASS

Esempi CSS

Modelli CSS Esempi CSS css quiz Esercizi CSS Certificato CSS

Riferimenti CSS

Riferimento CSS Selettori CSS Funzioni CSS CSS di riferimento sonoro Font sicuri per il Web CSS CSS Animabile Unità CSS Convertitore CSS PX-EM Colori CSS Valori di colore CSS Valori predefiniti CSS Supporto del browser CSS

Ombra della casella CSS


Proprietà CSS box-shadow

La proprietà CSS box-shadowviene utilizzata per applicare una o più ombre a un elemento.


Specificare un'ombra orizzontale e verticale

Nel suo utilizzo più semplice, specifichi solo un'ombra orizzontale e una verticale. Il colore predefinito dell'ombra è il colore del testo corrente.

Un elemento <div> con un box-shadow

Esempio

Specificare un'ombra orizzontale e una verticale:

div {
  box-shadow: 10px 10px;
}

Specificare un colore per l'ombra

Il colorparametro definisce il colore dell'ombra.

Un elemento <div> con un box-ombra grigio

Esempio

Specificare un colore per l'ombra:

div {
  box-shadow: 10px 10px grey;
}

Aggiungi un effetto sfocatura all'ombra

Il blurparametro definisce il raggio di sfocatura. Più alto è il numero, più sfocata sarà l'ombra.

Un elemento <div> con un riquadro grigio sfocato di 5px

Esempio

Aggiungi un effetto sfocato all'ombra:

div {
  box-shadow: 10px 10px 5px grey;
}

Imposta il raggio di diffusione dell'ombra

Il spreadparametro definisce il raggio di diffusione. Un valore positivo aumenta la dimensione dell'ombra, un valore negativo diminuisce la dimensione dell'ombra.

Un elemento <div> con un'ombra grigia sfocata, con un raggio di diffusione di 12px

Esempio

Imposta il raggio di diffusione dell'ombra:

div {
  box-shadow: 10px 10px 5px 12px grey;
}

Impostare il parametro interno

Il insetparametro cambia l'ombra da un'ombra esterna (inizio) a un'ombra interna.

Un elemento <div> con un riquadro ombra sfocato, grigio, inserito

Esempio

Aggiungi il parametro dell'inserto:

div {
  box-shadow: 10px 10px 5px grey inset;
}

Aggiungi più ombre

Un elemento può anche avere più ombre:

Esempio

div {
  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}

Carte

Puoi anche utilizzare la box-shadowproprietà per creare carte simili alla carta:

1

1 gennaio 2021

Norvegia

Hardanger, Norvegia

Esempio

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

Mettiti alla prova con gli esercizi

Esercizio:

Set a "2px" horizontal, and "2px" vertical, text shadow for the <h1> element.

<style>
h1 {
  : 2px 2px;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>


CSS Shadow Properties

The following table lists the CSS shadow properties:

Property Description
box-shadow Adds one or more shadows to an element
text-shadow Adds one or more shadows to a text