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

Linda Hamilton
Lepaskan: 2024-10-31 07:27:30
asal
793 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!

sumber:php.cn
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
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!