Mengapa Bayang Kotak Inset Saya Tidak Berfungsi pada Imej dalam CSS?

Bayang Kotak Inset Tidak Berfungsi pada Imej: Penyelesaian CSS

Dalam CSS, sifat bayang-kotak mencipta bayang-bayang di sekeliling elemen, memanjangkannya di luar sempadan elemen. Walau bagaimanapun, apabila digunakan pada imej, bayang-bayang ini selalunya kelihatan tidak memanjang ke atas imej.

Untuk menyelesaikan isu ini, anda boleh memanfaatkan elemen pseudo :selepas. Ini membolehkan anda mencipta elemen tambahan dalam bekas induk, membenarkan bayang-bayang digunakan pada elemen itu dan bukannya imej secara langsung.

Berikut ialah contoh:

main {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 90%;
  height: 90%;
  background-color: #FFFFFF;
  box-shadow: outset 3px 3px 10px 0 #000000;
}

main::after {
  box-shadow: inset 3px 3px 10px 0 #000000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}

Dengan menambahkan ini :selepas pengisytiharan kepada elemen utama, anda mencipta lapisan yang tidak kelihatan dan telus di atas imej. Bayang-bayang itu kemudiannya digunakan pada lapisan ini, membenarkannya memanjang ke atas imej seperti yang dikehendaki.

Atas ialah kandungan terperinci Mengapa Bayang Kotak Inset Saya Tidak Berfungsi pada Imej dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!