CSS Box Shadow

CSS box-shadow Attribute

CSS box-shadow Ang attribute ay nag-aplikar ng shadow sa elemento.

Ang pinakasimpleng paggamit ay lamang magbigay ng horizontal at vertical na shadow:

Ang dilaw na <div> elemento na may black na box-shadow

Example

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

Subukan natin:

Susunod, magdagdag ng kulay sa shadow:

Ang dilaw na <div> elemento na may grey na box-shadow

Example

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

Subukan natin:

Susunod, magdagdag ng epekto ng halimaw sa shadow:

Ang dilaw na <div> elemento, may halimaw na box-shadow

Example

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

Subukan natin:

Kard:

Maaari ka ring gamitin: box-shadow Panglikha ng epekto ng papel na kard:

1
January 1, 2021
Kape
Kape

Example

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

Try It Yourself: Paper CardTry It Yourself: Image Card

CSS Shadow Attribute

Ang sumusunod na talahanan ay naglalaan ng mga shadow attribute ng CSS:

Attribute Description
box-shadow Magdagdag ng isang o ilang shadow sa isang elemento.
text-shadow Magdagdag ng isang o ilang shadow sa teksto.