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!