CSS Box Shadow

aturan box-shadow CSS

CSS box-shadow Atribut menerapkan bayangan kepada elemen.

Penggunaan paling sederhana adalah hanya menentukan bayangan horizontal dan vertical:

Elemen <div> kuning dengan box-shadow hitam

contoh

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

Cuba sendiri

Seterusnya, tambahkan warna ke bayangan:

Elemen <div> kuning dengan box-shadow abu

contoh

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

Cuba sendiri

Seterusnya, tambahkan kesan kabur ke bayangan:

Elemen <div> kuning, dengan box-shadow yang kabur

contoh

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

Cuba sendiri

kad

Anda juga boleh gunakan box-shadow Membuat kesan kad kertas:

1
1 Januari 2021
Kopi
Kopi

contoh

div.card {
  lebar: 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: tengah;
}

coba sendiri: kartu kertascoba sendiri: kartu gambar

aturan bayangan CSS

tabel di bawah ini menunjukkan atribut bayangan CSS:

aturan deskripsi
box-shadow tambahkan satu atau lebih bayangan ke elemen.
text-shadow tambahkan satu atau lebih bayangan ke teks.