Bagaimanakah Saya Boleh Mencipta Bayang-Kotak Hanya pada Sisi Mendatar Unsur?

Mencipta Bayang-Bayang Kotak Semata-mata pada Sisi Mendatar

Untuk mencapai bayang-bayang kotak yang hanya merentangi sisi kiri dan kanan (mendatar) elemen, pertimbangkan untuk memanfaatkan berbilang takrifan bayang kotak.

Bayang kotak awal harta,

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

menghasilkan bayang-bayang pada semua sisi elemen. Untuk menyasarkan hanya bahagian kiri dan kanan, tambahkan dua bayang-bayang kotak yang berasingan:

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

Ini akan mencipta bayang-bayang yang memanjangkan 12 piksel ke kanan dan -12 piksel ke kiri, mencapai kesan yang diingini.

Anda juga mungkin mengalami sedikit pendarahan pada bayang-bayang di bahagian atas dan bawah. Untuk mengurangkan masalah ini, tambahkan dua bayang-bayang kotak tambahan untuk menutupi bleed-through:

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

Takrifan yang dikemas kini ini akan menutupi pendarahan dan mengehadkan bayang-bayang di sebelah kiri dan kanan elemen tanpa menggunakan penggodaman atau imej.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Bayang-Kotak Hanya pada Sisi Mendatar Unsur?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!