Bagaimana untuk Mencipta Bayang Kotak Mendatar Tanpa Imej atau Trik?

Cara Mencapai Bayang Kotak Mendatar

Cara Mencapai Bayang Kotak Mendatar hanya di sebelah kiri dan kanan (mendatar?) tanpa perlu menggunakan sebarang helah atau imej Mencapai kesan kotak-bayang?

Menggunakan kod berikut akan menghasilkan kesan bayang sekeliling:

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

Penyelesaian: Gunakan berbilang kotak-bayang

Anda boleh menggunakan Berbilang kotak -bayang menyelesaikan masalah ini, setiap kotak-bayangan Bahagian yang sepadan:

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

Menutup bayang tidak sempurna (pilihan)

Untuk menutup lagi kesan pendarahan, tambahkan dua lapisan di bahagian bawah dan bayang kotak atas untuk menutup :

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 Mendatar Tanpa Imej atau Trik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!