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!