Rumah >hujung hadapan web >tutorial css >Bagaimanakah saya boleh mencipta bayangan kotak tersuai yang menaungi semua sisi elemen kecuali satu?
Dalam soalan berkaitan CSS3 ini, pengguna berusaha untuk mencipta bayangan kotak tersuai yang, tidak seperti tradisional box-shadow, akan menaungi semua sisi elemen kecuali satu. Hasil yang diingini ialah mempunyai bar navigasi tab dengan bayang yang boleh dilihat pada tab terbuka dan bayang yang berasingan di bahagian bawah keseluruhan bahagian tab.
Kunci untuk menangani masalah ini terletak pada pemahaman parameter bagi harta kotak-bayang. Bayang-bayang kotak CSS3 mengambil empat nilai berasingan:
Dalam senario khusus ini, kita boleh mengawal teduhan bahagian tertentu sahaja dengan memanipulasi nilai ini.
Untuk mencipta bayangan sisi atas dan menghadap ke dalam untuk keseluruhan bahagian tab, kami menetapkan dua nilai pertama kepada 0 (sifar offset) dan melaraskan jejari kabur dan sebarkan dengan sewajarnya.
Untuk bayang tab individu, kami mencipta div dalam elemen #content dan meletakkannya berbanding dengan ibu bapa. Div baharu menerima latar belakang yang kukuh dan bayangnya ditentukan. #content induk itu sendiri telah mengeluarkan pelapiknya dan bayang yang berasingan ditambah.
Akhir sekali, untuk menggunakan bayang-bayang pada setiap tab, kami menyasarkan penambat dalam elemen #nav li. Kami meletakkannya secara relatif kepada induknya dan menentukan nilai bayang-bayang yang diingini.
Dengan menggunakan teknik ini, pengguna boleh mencapai kesan lorekan yang diingini pada semua sisi elemen tab kecuali yang terbuka, dengan berkesan memisahkannya daripada tab lain.
Atas ialah kandungan terperinci Bagaimanakah saya boleh mencipta bayangan kotak tersuai yang menaungi semua sisi elemen kecuali satu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!