Cara menggunakannya

Mulakan daripada pratetap atau laraskan ofset, blur, spread, warna dan kelegapan lapisan pertama.
Tambahkan lebih banyak lapisan untuk kedalaman lebih semula jadi, atau tandakan “Inset” untuk bayang dalam.
Tukar latar belakang pratonton dan warna kotak agar sepadan dengan reka bentuk anda, kemudian salin CSS.

Cara ia berfungsi

box-shadow mengambil, bagi setiap lapisan: ofset mendatar, ofset menegak, jejari blur, jejari sebaran dan warna, dengan pilihan didahului oleh inset. Ofset positif menggerakkan bayang ke kanan dan ke bawah. Blur melembutkan tepi dan tidak boleh negatif; sebaran membesarkan (positif) atau mengecilkan (negatif) bayang sebelum diblurkan. Berbilang lapisan dipisahkan dengan koma dan lapisan pertama dilukis di atas.

Ketinggian realistik biasanya menggabungkan bayang kecil yang rapat dengan bayang lebih besar dan lembut pada kelegapan rendah, seperti yang dilakukan oleh pratetap “Elevated”. Warna ditulis sebagai rgba() supaya kelegapan jelas. Bayang mengikut border-radius elemen dan tidak mengambil ruang susun atur, jadi ia tidak pernah menggerakkan elemen lain.

Bayang dengan nilai blur yang sangat besar pada banyak elemen boleh menjadikan skrol lebih perlahan pada telefon kelas rendah. Jika anda menganimasikan bayang, biasanya lebih lancar untuk memudarkan elemen pseudo yang sudah mempunyai bayang berbanding menganimasikan box-shadow itu sendiri.

Contoh

Kad pada halaman cerah

box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 8px 24px -4px rgba(0, 0, 0, 0.18); memberikan kad tepi yang tajam serta kesan terangkat lembut.

Cincin fokus tanpa perubahan susun atur

Lapisan dengan ofset 0, blur 0 dan sebaran 3px dalam warna jenama anda melukis cincin padat di sekeliling butang. Tidak seperti border, ia tidak mengubah saiz elemen.

Medan input yang ditekan

inset 0 2px 6px 0 rgba(0, 0, 0, 0.25) menjadikan medan teks kelihatan sedikit terbenam.

Soalan Lazim

Apakah perbezaan antara box-shadow dengan filter: drop-shadow()?

box-shadow mengikut kotak elemen dan border-radius serta menyokong spread dan inset. drop-shadow() mengikut bentuk yang kelihatan, termasuk kawasan lut sinar pada imej PNG atau SVG, tetapi tiada spread atau inset.

Mengapa bayang saya terpotong?

Induk dengan overflow: hidden memangkas apa-apa di luar kotaknya, termasuk bayang. Tambah padding pada induk atau alihkan peraturan overflow.

Berapa banyak lapisan yang patut saya guna?

Satu atau dua sudah memadai untuk kebanyakan antara muka. Lebih banyak lapisan boleh kelihatan lebih licin tetapi kos melukis sedikit lebih tinggi, yang penting pada senarai panjang.

Privasi

CSS dijana dalam pelayar anda. Tiada apa-apa dimuat naik atau disimpan.