Tingkat Lanjut Tentang CSS Box-Shadow

Dasar

5px yang pertama adalah offset sumbu X, 5px yang ke dua adalah offset sumbu Y, 7px adalah tingkat blur bayangan, black adalah warna bayangan:

div {
  -webkit-box-shadow:5px 5px 7px black;
  -moz-box-shadow:5px 5px 7px black;
  box-shadow:5px 5px 7px black;
}

Multiple Box Shadow

Sama seperti cara pertama, hanya saja kita membuat lebih dari satu baris deklarasi bayangan. Setiap satu bayangan dipisahkan dengan tanda koma:

Multiple Box Shadow

div {
  -webkit-box-shadow:
    5px 5px 0px red,
    10px 10px 0px green,
    15px 15px 0px blue,
    20px 20px 0px yellow,
    20px 20px 3px black;
  -moz-box-shadow:
    5px 5px 0px red,
    10px 10px 0px green,
    15px 15px 0px blue,
    20px 20px 0px yellow,
    20px 20px 3px black;
  box-shadow:
    5px 5px 0px red,
    10px 10px 0px green,
    15px 15px 0px blue,
    20px 20px 0px yellow,
    20px 20px 3px black;
}

Box Shadow dengan Nilai Berupa 4 Angka

Secara umum terdiri dari tiga angka dengan satu kode warna untuk menentukan warna bayangan (??).

Sintaks CSS Box Shadow dengan 4 buah angka dan satu kode warna: 0px yang pertama adalah offset sumbu X, 0px yang ke dua adalah offset sumbu Y, 5px adalah tingkat blur bayangan, 10px adalah ketebalan bayangan dari elemen (lebih tampak sebagai border-width dalam CSS Border, hanya saja ini diterapkan pada bayangan), black adalah warna bayangan:

4 Angka dan 1 Kode Warna

div {
-webkit-box-shadow:0px 0px 5px 10px black;
-moz-box-shadow:0px 0px 5px 10px black;
box-shadow:0px 0px 5px 10px black;
}