CSS Box Shadow

CSS box-shadow eigenschap

CSS box-shadow Eigenschap past de schaduw toe op het element.

De eenvoudigste gebruikswijze is om alleen de horizontale en verticale schaduw aan te geven:

Gele <div> elementen met een zwarte box-shadow

Voorbeeld

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

probeer het zelf

Vervolgens, voeg een kleur toe aan de schaduw:

Gele <div> elementen met een grijze box-shadow

Voorbeeld

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

probeer het zelf

Vervolgens, voeg een vaag effect toe aan de schaduw:

Gele <div> elementen, met een vaag box-shadow

Voorbeeld

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

probeer het zelf

kaart

U kunt ook box-shadow Eigenschap maakt papieren kaart effect:

1
January 1, 2021
Koffie
Koffie

Voorbeeld

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;
}

Probeer het zelf: papieren kaartProbeer het zelf: afbeeldingskaart

CSS schaduw eigenschappen

De tabel hieronder lijst de schaduw eigenschappen van CSS op:

Eigenschap Beschrijving
box-shadow Voeg een of meerdere schaduwen toe aan een element.
text-shadow Voeg een of meerdere schaduwen toe aan de tekst.