Bagaimana untuk Mencipta Bayangan Kotak CSS3 pada Semua Sisi Kecuali Satu?

Barbara Streisand
Lepaskan: 2024-11-06 04:14:02
asal
888 orang telah melayarinya

How to Create a CSS3 Box Shadow on All Sides Except One?

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan