Rumah > Artikel > hujung hadapan web > Bagaimana untuk Mencipta Bayangan Kotak CSS3 pada Semua Sisi Kecuali Satu?
Melorek Semua Sisi Kotak CSS3 Kecuali Satu
Mencipta kesan kotak-bayang CSS3 pada semua sisi elemen kecuali satu boleh satu tugas yang sukar. Mari kita terokai cara untuk mencapainya menggunakan langkah berikut:
1. Cipta Bekas untuk Kandungan Tanpa Bayang:
Jika bahagian elemen yang tidak sepatutnya menerima bayang-bayang, cipta div di dalamnya untuk bertindak sebagai bekas untuk kandungan ini. Contohnya, jika tab terbuka mestilah tanpa bayang, buat div di dalamnya dan gayakannya seperti berikut:
<code class="css">#content_over_shadow { padding: 1em; position: relative; background:#fff; }</code>
2. Tentukan Bayang untuk Bekas:
Alih keluar sebarang padding yang tidak diperlukan daripada bekas induk (#content dalam kes ini) dan tambahkan bayang-kotak padanya. Ini akan mencipta garis bayang mendatar yang memanjang di bawah semua tab kecuali yang terbuka.
<code class="css">#content { font-size: 1.8em; box-shadow: 0 0 8px 2px #888; }</code>
3. Tambahkan Bayang-bayang pada Tab:
Akhir sekali, tambahkan bayang-bayang pada tab individu (mis., #nav li a):
<code class="css">#nav li a { margin-left: 20px; padding: .7em .5em .5em .5em; font-size: 1.3em; color: #FFF; display: inline-block; text-transform: uppercase; position: relative; box-shadow: 0 0 8px 2px #888; }</code>
Atas ialah kandungan terperinci Bagaimana untuk Mencipta Bayangan Kotak CSS3 pada Semua Sisi Kecuali Satu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!