Bagaimana Saya Boleh Mencipta Bayang Kotak Hanya di Bahagian Kiri dan Kanan Elemen?

Penyesuaian Box-Shadow: Mencapai Bayang Secara Eksklusif di Bahagian Kiri dan Kanan

Dalam percubaan untuk meningkatkan daya tarikan visual unsur, anda menyasarkan untuk memasukkan bayang-bayang kotak yang muncul semata-mata di bahagian kiri dan kanan. Walau bagaimanapun, pelaksanaan semasa anda menyebabkan bayang-bayang muncul di semua sisi. Untuk menangani cabaran ini, mari kita terokai penyelesaian menggunakan berbilang bayang-bayang kotak.

Mula-mula, mari fokus pada mencapai bayang-bayang pada bahagian yang dikehendaki. Dengan melaraskan nilai dalam harta, anda boleh menetapkan offset mendatar dan menegak. Perhatikan kod berikut:

box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);

Dalam contoh ini, bayang-bayang kotak pertama mencipta bayang-bayang 12 piksel dari tepi kiri dan 15 piksel di bawahnya, memanjang ke kanan. Bayang-bayang kotak kedua mensimulasikan bayang-bayang di sebelah kanan.

Walau bagaimanapun, anda mungkin melihat sedikit jurang dalam bayang-bayang kerana kekurangan bayang-bayang di tepi atas dan bawah. Untuk membetulkannya, bayang-bayang kotak tambahan diperlukan:

box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);

Bayang-bayang tambahan ini memperkenalkan penyamaran dengan mencipta "sempadan" putih di sekeliling elemen. Ini secara berkesan menyembunyikan jurang, menghasilkan bayang mendatar yang bersih.

Ingat, teknik ini mungkin tidak sempurna dan anda mungkin menghadapi beberapa ketidaksempurnaan kecil. Walau bagaimanapun, ia menawarkan pendekatan praktikal untuk mencapai bayang-bayang secara eksklusif di sebelah kiri dan kanan, meningkatkan daya tarikan estetik elemen anda.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Mencipta Bayang Kotak Hanya di Bahagian Kiri dan Kanan Elemen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!