Box Shadow Generator
Box Shadow Generator — berjalan dalam pelayar. Input tidak disimpan.
Penjana box-shadow
Masukkan nilai, kemudian tekan Kira.
Pratonton
Laraskan peluncur, CSS box-shadow dikemas kini serta-merta.
Cara guna
- Tetapkan kedudukan bayang dengan peluncur atau nombor anjakan X dan anjakan Y. Lalai ialah X 0, Y 8.
- Laraskan Kabur dan Sebaran. Kabur lalai ialah 24.
- Padankan warna bayang dan peluncur kelegapan. Peratus kelegapan ditunjukkan di sisinya.
- Hidupkan inset untuk bayang dalaman. Semaknya pada kotak pratonton serta-merta.
- Salin CSS di bawah ke helaian gaya. Set semula memulihkan lalai.
Konsep utama
Penjana box-shadow ini untuk menala box-shadow pada kad, butang, dan modal. X dan Y ialah sejauh mana bayang duduk, kabur ialah kelembutan tepi, dan sebaran ialah kawasan bayang. Menggabungkan warna dan alfa membolehkan anda membuat bayang berwarna jenama dan bukan kelabu. CSS dikemas kini sebaik sahaja anda gerakkan peluncur.
Inset meletakkan bayang di dalam kotak, sesuai untuk input ditekan atau teduhan dalaman. Pratonton ialah segi empat bulat putih untuk latar belakang cerah. Janaan berjalan hanya dalam pelayar. Skrin ini membuat satu lapisan; untuk bayang bertindan, sambungkan nilai yang disalin dengan koma.
Contoh
Lalai Y 8, kabur 24, dan kelegapan 25% memberi bayang lembut ke bawah. Menaikkan X dan Y kepada 12 memperdalam bayang kanan bawah; menghidupkan inset menukar nilai yang sama kepada teduh dalaman. Tampal CSS yang disalin di dalam pemilih. Senarai kad sering menggunakan semula satu bayang untuk hierarki dan memberi modal kabur lebih besar. Pada latar belakang gelap anda mungkin perlu alfa lebih tinggi daripada yang dicadangkan pratonton putih. Meletakkan deklarasi yang disalin dalam pertanyaan media membolehkan anda kurangkan sebaran pada mudah alih. Apabila mencuba input yang sama semula, set semula dan tampal baharu supaya output lama tidak bercampur. Pada komputer kongsi, kosongkan medan apabila siap. Menutup tab menggugurkan nilai; anda tidak perlu permintaan padam pelayan.
Berkaitan: penjana kecerunan · pemilih warna
Soalan lazim
Bila saya guna inset dalam CSS box-shadow?
Ia bayang dalaman. Gunakannya untuk teduh dalaman kad atau rupa butang ditekan.
Adakah nilai box-shadow dihantar ke pelayan?
Tidak. Pratonton dan rentetan dibina hanya dalam pelayar.
Bolehkah saya buat bayang bertindan?
Alat ini membuat satu lapisan. Sambungkan deklarasi yang disalin dengan koma untuk beberapa lapisan.
Ke mana kelegapan pergi?
Ia menjadi alfa warna. Baca peratus di sisi peluncur.
Apakah perbezaan antara sebaran dan kabur?
Kabur melembutkan tepi; sebaran membesar atau mengecil saiz bayang.
Bolehkah saya tukar latar belakang pratonton?
Pratonton ialah kotak putih tetap. Semak semula pada latar belakang halaman sebenar anda.
Disemak terakhir: 2026-09-04