Penjana Box Shadow CSS
Reka efek box-shadow secara visual dengan pratonton masa nyata. Tambah berbilang lapisan bayang, ubah setiap parameter, dan salin CSS.
Apakah Itu Penjana Box Shadow CSS?
Penjana box-shadow CSS membantu anda mencipta efek bayang untuk elemen HTML tanpa menulis kod secara manual. Anda melaraskan parameter seperti ofset mendatar/menegak, jejari kabur, sebaran, warna, dan kelegapan menggunakan kawalan visual, dan alat ini menjana nilai properti CSS yang tepat untuk anda.
Cara Mencipta Box Shadow
- Laraskan ofset — Gunakan peluncur X dan Y untuk meletakkan bayang
- Tetapkan kabur & sebaran — Kawal kelembutan dan saiz bayang
- Pilih warna — Pilih warna bayang dan laraskan kelegapannya
- Togol inset — Bertukar antara bayang luar dan dalam
- Tambah lapisan — Tindankan berbilang bayang untuk efek kompleks
- Salin CSS — Klik butang salin untuk mendapatkan kod akhir
Mengapa Menggunakan Penjana Box Shadow Ini?
- Penyuntingan Visual — Lihat perubahan bayang dalam masa nyata pada kotak pratonton
- Berbilang Lapisan — Gabungkan sehingga 5 lapisan bayang untuk efek kedalaman
- Kawalan Tepat — Laraskan ofset, kabur, sebaran, kelegapan, dan inset secara berasingan
- Output Bersih — Dapatkan CSS yang diformat dengan betul sedia untuk ditampal ke dalam stylesheet anda
- Privasi — Semuanya berjalan secara setempat dalam pelayar anda
FreeToolbox vs Penjana Bayang Lain
| Ciri | FreeToolbox | cssmatic.com | shadows.brumm.af |
|---|---|---|---|
| Berbilang lapisan | Sehingga 5 | Tunggal | Tanpa had |
| Togol Inset | Ya | Ya | Tidak |
| Kawalan Kelegapan | Ya | Terhad | Ya |
| Iklan | Minimal | Berat | Tiada |
| Tema Gelap | Ya | Tidak | Ya |
Soalan lazim
Apakah perbezaan antara kabur dan sebaran?
Kabur mengawal betapa lembut/tersebarnya tepi bayang. Sebaran mengawal berapa banyak bayang mengembang atau mengecut daripada saiz elemen. Sebaran positif menjadikannya lebih besar, negatif menjadikannya lebih kecil.
Bolehkah saya menambah berbilang bayang?
Ya. Klik 'Tambah Lapisan' untuk menindankan sehingga 5 lapisan bayang. Setiap lapisan mempunyai kawalan bebas untuk semua parameter.
Apakah fungsi inset?
Inset menggerakkan bayang di dalam elemen dan bukannya di luar, mencipta bayang dalam atau efek tertekan ke dalam.
Adakah ia berfungsi untuk text-shadow juga?
Alat ini menjana CSS box-shadow. Text-shadow menggunakan sintaks yang serupa tetapi tanpa nilai sebaran atau pilihan inset. Anda boleh menyesuaikan output secara manual.
Adakah alat ini percuma?
Ya, percuma sepenuhnya tanpa had atau pendaftaran diperlukan.