Bagaimana untuk Memohon Inset Box-Shadow pada Imej dengan CSS?

Inset Box-Shadow dan Imej: Penyelesaian

Menggunakan inset box-shadow pada bekas yang mengandungi imej selalunya mengakibatkan bayang-bayang tidak muncul di atas imej. Untuk mengatasi had ini, seseorang boleh menggunakan penyelesaian CSS yang unik.

Dengan menggunakan elemen pseudo :selepas, lapisan pembawa bayang kedua boleh dibuat. Berikut ialah kod sampel yang menunjukkan teknik ini:

CSS:

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

HTML:

<main>
  <img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png">
</main>

Kaedah ini menghapuskan keperluan untuk elemen tambahan dalam markup, menawarkan pendekatan yang bersih dan berasaskan CSS. Elemen :after bertindak sebagai "bekas bayang" yang menindih imej, membenarkan bayang kotak sisipan memanjang ke atasnya.

Atas ialah kandungan terperinci Bagaimana untuk Memohon Inset Box-Shadow pada Imej dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!