Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Memohon Inset Box-Shadow pada Imej dengan CSS?

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

Linda Hamilton
Lepaskan: 2024-10-31 07:27:30
asal
940 orang telah melayarinya

How to Apply Inset Box-Shadow to Images with 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%;
}
Salin selepas log masuk

HTML:

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

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan