Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mencipta Bayang Kotak Mendatar Tanpa Imej atau Trik?
Bagaimana untuk Mencipta Bayang Kotak Mendatar Tanpa Imej atau Trik?
- Mary-Kate Olsenasal
- 2024-12-01 11:06:11163semak imbas
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!