Bagaimana untuk Membuat Bayangan Kotak CSS3 pada Semua Bahagian Elemen Kecuali Bahagian Bawah?

Mewujudkan CSS3 Box-Shadow pada Semua Sisi Tetapi Satu: Penyelesaian Komprehensif

Masalah: Mereka bentuk tab bar navigasi, anda perlu menyerlahkan tab terbuka dengan bayangan kotak CSS3. Walau bagaimanapun, anda ingin mengecualikan bayang bawah tab terbuka untuk mengelakkan mengaburkan kawasan kandungan berbayang.

Pendekatan:

Untuk mencapai ini, kami boleh menggunakan gabungan sifat kedudukan dan bayangan kotak.

Pelaksanaan:

1. Buat
   elemen dalam div #content dan tetapkan gaya berikut:

<code class="css">#content_over_shadow {
    position: relative;  /* Positions the element relative to its parent */
    background:#fff;  /* Sets a solid background to prevent transparency */
}</code>

2. Laraskan gaya #content dan tambahkan bayangan kotak:

<code class="css">#content {
    box-shadow: 0 0 8px 2px #888;  /* Shadow for the bottom line */
}</code>

3. Gunakan bayang-bayang pada tab:

<code class="css">#nav li a {
    box-shadow: 0 0 8px 2px #888;  /* Shadow for each tab */
    background:#FFF;  /* Ensure a solid background for shadow visibility */
}</code>

Penjelasan:

Kedudukan relatif #content_over_shadow membolehkannya bertindih dengan #kandungan berbayang div. Dengan menetapkan latar belakang yang kukuh, kami menyekat ketelusan #kandungan, membenarkan bayang-bayang kelihatan.

Menambah sifat bayang-kotak pada setiap tab menyerlahkan tab terbuka sambil mengekalkan bayang-bayang pada semua tab lain. Anda boleh melaraskan offset, hamparan dan warna bayang-bayang kotak untuk menyesuaikan penampilan.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Bayangan Kotak CSS3 pada Semua Bahagian Elemen Kecuali Bahagian Bawah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!