Bagaimana untuk Mencipta Drop Shadow Sebelah dengan CSS?

Mencipta Drop Shadow Sebelah

Untuk mencipta bayang jatuh yang hanya muncul pada satu sisi elemen, anda boleh menggunakan sifat CSS dan elemen pseudo. Berikut ialah penyelesaian terperinci:

Menggunakan ::after Pseudo-Element

.box {
  position: relative;
  width: 200px;
  height: 100px;
}

.box::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
  box-shadow: 0px 10px 10px #000000;
  z-index: -1;
}

Dalam kod ini, kami mencipta elemen induk dengan kelas kotak yang meletakkan kedudukan unsur tersebut. Kemudian, kami menggayakan ::after pseudo-element untuk mencipta bayang-bayang jatuh dengan menyatakan kedudukan, saiz dan sifat-sifat bayangan kotak. Indeks-z ditetapkan kepada -1 untuk meletakkan bayang-bayang di belakang elemen utama.

Menambah Kabur Kecerunan

Untuk meningkatkan penampilan bayang-bayang, anda boleh menggunakan kabur kecerunan pada bayang-bayang kotak:

.box::after {
  ...
  box-shadow: 0px 10px 10px 10px rgba(0, 0, 0, 0.5);
}

Kod tambahan ini menambahkan kabur kecerunan pada bayang-bayang, mewujudkan kesan yang lebih halus dan realistik.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Drop Shadow Sebelah dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!