Penjana CSS Box Shadow
Bina box-shadow dengan menggerakkan peluncur dan melihat hasilnya pada sebuah kad. Susun sehingga enam lapisan untuk bayang yang lebih lembut dan realistik, gunakan inset untuk kesan tertekan, dan mulakan dengan pratetap seperti lembut, terapung, bercahaya atau neumorphism. Salin CSS dengan satu klik.
Cara menggunakannya
- Pilih pratetap atau laraskan ofset, kabur, sebaran, warna dan kelegapan bayang.
- Tambah lapisan dengan + dan pilih setiap satu untuk mengeditnya; ubah latar belakang, warna kotak dan jejari sudut supaya sepadan dengan reka bentuk anda.
- Salin CSS dan tampal ke dalam peraturan elemen.
Soalan lazim
Apakah fungsi kabur dan sebaran?
Kabur menjadikan tepi bayang lebih lembut; sifar memberi tepi yang tajam. Sebaran membesarkan bayang ke semua arah sebelum dikaburkan, dan sebaran negatif mengecilkannya, yang membantu bayang kabur yang besar kekal di bawah elemen.
Mengapa guna beberapa lapisan bayang?
Bayang sebenar lebih gelap berhampiran objek dan pudar apabila semakin jauh. Menggabungkan bayang kecil yang tajam dengan bayang lebih besar dan lembut meniru perkara itu dan kelihatan lebih semula jadi daripada satu bayang. Lapisan pertama dalam senarai dilukis paling atas.
Adakah box-shadow memperlahankan halaman?
Tidak dalam penggunaan biasa. Kabur yang sangat besar pada banyak elemen, atau menganimasikan bayang itu sendiri, boleh menjejaskan prestasi pada telefon yang perlahan; untuk animasi, ubah kelegapan pseudo-elemen yang mempunyai bayang.
🏷️ Penjana Meta Tag
🖼️ Penjana Open Graph
🔗 Pembina Pautan UTM
🌈 Penjana Gradien CSS