DevTulz Online

Penjana CSS Box Shadow

Latar belakang

Apakah CSS Box Shadow?

Sifat CSS box-shadow menambah kesan bayangan di sekeliling bingkai elemen. Bayangan boleh diimbangi, dikaburkan, disebarkan, diwarnai dan ditetapkan sebagai inset (bayangan dalaman). Beberapa bayangan yang dipisahkan koma boleh ditindih untuk kesan yang kaya. Penjana ini membolehkan anda membina bayangan berbilang lapisan yang kompleks secara visual dan menyalin CSS sedia tempel ke papan klip.

Cara Menggunakan Penjana Box Shadow

  1. Laraskan gelangsar untuk Offset X/Y, Blur dan Spread untuk meletakkan dan membentuk bayangan.

  2. Klik pada contoh warna untuk memilih warna bayangan, dan gunakan gelangsar Opacity untuk ketelusan.

  3. Togol 'Inset' untuk mencipta cahaya dalaman atau kesan tertekan.

  4. Klik '+ Tambah lapisan' untuk menindih beberapa bayangan.

  5. Salin CSS yang dijana dan tampalkan ke dalam helaian gaya anda.

Soalan-Soalan Lazim

Apakah perbezaan antara box-shadow dan penapis drop-shadow? box-shadow menambahkan bayangan di sekitar kotak sempadan segi empat tepat elemen dan menyokong bayangan insert. Penapis CSS: drop-shadow() menggunakan bentuk visual elemen (termasuk ketelusan), menjadikannya mengikuti garis besar bukan segi empat tepat seperti PNG dengan latar belakang yang telus.

Bagaimana saya membuat kesan ketinggian kad Material Design? Timbunan dua bayangan kotak: bayangan ambien yang lembut (kenyalaran besar, opacity rendah, penyebaran sedikit) dan bayangan kunci (kenyalaran lebih kecil, opacity lebih tinggi, offset arah). Contohnya: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).

Adakah box-shadow menjejaskan susun atur halaman? Tidak. box-shadow tidak menjejaskan saiz atau kedudukan elemen dalam aliran dokumen. Tidak seperti outline, ia tidak mengambil ruang susun atur dan tidak akan menggerakkan elemen lain.

Bolehkah saya menganimasi box-shadow? Ya. box-shadow boleh dianimasikan dengan peralihan CSS dan animasi. Untuk prestasi, lebih suka peralihan box-shadow hanya apabila perlu — pelayar tidak dapat GPU-percepat perubahan box-shadow seefisien transform atau opacity.

Keywords: penjana CSS box shadow, box-shadow CSS, alat bayangan CSS, CSS drop shadow, inset shadow, bayangan berbilang lapisan, CSS shadow dalam talian