Bagaimana untuk Mencipta Bayangan Kotak Kiri dan Kanan Sahaja dalam CSS?

Cara Memohon Box-Shadow pada Bahagian Kiri dan Kanan sahaja

Untuk mencapai kesan kotak-bayang hanya pada kiri dan kanan sisi tanpa menggunakan penggodaman atau imej, anda boleh memanfaatkan berbilang bayang-bayang kotak untuk mensimulasikan hasil yang diingini. Begini caranya:

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

Kod ini menghasilkan dua bayang-bayang kotak: satu untuk sebelah kiri (-12px offset) dan satu untuk sebelah kanan (12px offset). Offset negatif untuk bayang-bayang kiri dan penggunaan -4px menolak bayang-bayang ke dalam, memastikan ia hanya muncul di tepi kiri dan kanan.

Nota: Memandangkan penyelesaian yang disediakan melibatkan "penyamaran " untuk menyembunyikan bayang dari sisi lain, pertimbangkan untuk meneroka pendekatan alternatif, seperti yang dicadangkan oleh @Hamish dalam jawapan rujukan, yang menawarkan pendekatan yang lebih mantap penyelesaian tanpa topeng.

Untuk meningkatkan lagi kesan, anda boleh menambah bayang-bayang kotak tambahan untuk menutup sebarang bayang yang mungkin masih mengalir di bahagian atas dan bawah:

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);

Kod ini menutup bayang-bayang di bahagian atas dan bawah dengan berkesan, memberikan kesan yang lebih digilap dan diingini.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Bayangan Kotak Kiri dan Kanan Sahaja dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!