Penjana Bayang Kotak CSS
Jana kesan box-shadow CSS yang cantik dengan pratonton masa nyata dan sifat yang boleh disesuaikan
Pratonton Langsung
Bayang
Bayang 1
0px
4px
6px
0px
Bayang Pratetap
CSS Dijana
box-shadow: 0px 4px 6px 0px #00000040;.box {
box-shadow: 0px 4px 6px 0px #00000040;
}Apakah Bayang Kotak CSS?
box-shadow CSS ialah sifat yang menambah kesan bayang di sekeliling bingkai elemen. Anda boleh menetapkan berbilang kesan yang dipisahkan dengan koma. Penjana bayang kotak kami memudahkan anda mencipta dan menyesuaikan bayang dengan editor visual. Laras ofset, kabur, sebaran, warna, dan cipta bayang dalam dengan pratonton masa nyata.
Sifat Bayang Kotak
- Ofset Mendatar (X): Mengalihkan bayang ke kiri (negatif) atau ke kanan (positif)
- Ofset Menegak (Y): Mengalihkan bayang ke atas (negatif) atau ke bawah (positif)
- Jejari Kabur: Nilai lebih tinggi menghasilkan lebih banyak kekaburan. 0 menghasilkan tepi yang tajam
- Jejari Sebaran: Nilai positif mengembangkan bayang, nilai negatif mengecilkannya
- Warna Bayang: Warna bayang dengan kelegapan pilihan (gunakan hex dengan alfa atau rgba)
- Bayang Dalam: Menukar bayang daripada luar kepada dalam (di dalam elemen)
Cara Menggunakan
- Laras ofset mendatar dan menegak untuk meletakkan bayang
- Tetapkan jejari kabur untuk kelembutan bayang dan jejari sebaran untuk saiz
- Pilih warna bayang dan togol inset jika diperlukan
- Tambah berbilang bayang untuk kesan berlapis, kemudian salin kod CSS
Ciri Utama
- Pratonton langsung: Lihat bayang anda dalam masa nyata semasa anda melaras nilai
- Berbilang bayang: Lapis sehingga 5 bayang untuk kesan kompleks
- Bayang pratetap: Mula pantas dengan 6 gaya bayang lazim
- Bayang dalam: Cipta bayang dalaman untuk kesan kedalaman
- Salin kod CSS: Salin sifat box-shadow lengkap dengan satu klik