CSS Box Shadow

CSS box-shadow egenskap

CSS box-shadow Egenskaben anvender skygge på elementet.

Den mest enkle brug er kun at specificere horisontal og vertical skygge:

Gule <div>-elementer med sort box-shadow

Eksempel

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

prøv det selv

Følgende, tilføj farve til skyggen:

Gule <div>-elementer med grå box-shadow

Eksempel

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

prøv det selv

Følgende, tilføj en sløret effekt til skyggen:

Gule <div>-elementer, med sløret box-shadow

Eksempel

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

prøv det selv

kort

Du kan også bruge box-shadow Oprettelse af papirkortseffekt:

1
January 1, 2021
Kaffe
Kaffe

Eksempel

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

Prøv det selv: papirkortPrøv det selv: bildekort

CSS skyggeegenskaper

Følgende tabell viser CSS skyggeegenskaper:

Egenskap Beskrivelse
box-shadow Legg til en eller flere skygger til et element.
text-shadow Legg til en eller flere skygger i teksten.