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

Bayang Kotak Terhad kepada Sebelah Kiri dan Kanan Tanpa Hacks

Soalan:

Bagaimana anda boleh mencipta bayangan kotak secara eksklusif di sebelah kiri dan kanan elemen tanpa menggunakan hacks atau imej?

Jawapan:

Penyelesaian menggunakan berbilang bayang-bayang kotak, satu untuk setiap sisi yang ditetapkan:

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

Walau bagaimanapun, perlu diperhatikan bahawa pendekatan ini tidak sempurna sepenuhnya, kerana ia mungkin mengakibatkan pendarahan bayang-bayang. Untuk mengurangkan ini, bayang-bayang kotak tambahan boleh ditambah di bahagian atas dan bawah untuk menutup limpahan:

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

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