Ombra della casella CSS
Proprietà CSS box-shadow
La proprietà CSS box-shadow
viene 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.
Esempio
Specificare un'ombra orizzontale e una verticale:
div
{
box-shadow: 10px 10px;
}
Specificare un colore per l'ombra
Il color
parametro definisce il colore dell'ombra.
Esempio
Specificare un colore per l'ombra:
div
{
box-shadow: 10px 10px grey;
}
Aggiungi un effetto sfocatura all'ombra
Il blur
parametro definisce il raggio di sfocatura. Più alto è il numero, più sfocata sarà l'ombra.
Esempio
Aggiungi un effetto sfocato all'ombra:
div
{
box-shadow: 10px 10px 5px grey;
}
Imposta il raggio di diffusione dell'ombra
Il spread
parametro definisce il raggio di diffusione. Un valore positivo aumenta la dimensione dell'ombra, un valore negativo diminuisce la dimensione dell'ombra.
Esempio
Imposta il raggio di diffusione dell'ombra:
div
{
box-shadow: 10px 10px 5px 12px grey;
}
Impostare il parametro interno
Il inset
parametro cambia l'ombra da un'ombra esterna (inizio) a un'ombra interna.
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-shadow
proprietà per creare carte simili alla carta:
1
1 gennaio 2021
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;
}
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 |