Ombra Box CSS
- Pagina precedente Ombra CSS
- Pagina successiva Effetti di testo CSS
Proprietà box-shadow CSS
CSS box-shadow L'applicazione delle proprietà di ombra sugli elementi.
L'uso più semplice è specificare solo l'ombra orizzontale e verticale:
Elemento <div> giallo con box-shadow nero
Esempio
div {
box-shadow: 10px 10px;
}
Aggiungi un colore all'ombra:
Elemento <div> giallo con box-shadow grigio
Esempio
div {
box-shadow: 10px 10px grigio;
}
Aggiungi un effetto sfumato all'ombra:
Elemento <div> giallo, con box-shadow sfumato
Esempio
div {
box-shadow: 10px 10px 5px grigio;
}
scheda
Puoi anche usare box-shadow Creazione dell'effetto di carta fisica delle proprietà:
1
1 gennaio 2021
Caffè
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;
}
Prova con te stesso: scheda cartaProva con te stesso: scheda immagine
Proprietà di ombra CSS
La tabella seguente elenca le proprietà di ombra CSS:
| Proprietà | Descrizione |
|---|---|
| box-shadow | Aggiungi una o più ombre a un elemento. |
| text-shadow | Aggiungi una o più ombre nel testo. |
- Pagina precedente Ombra CSS
- Pagina successiva Effetti di testo CSS
