⭐ 0
🔍
Teks Imej PDF & Dokumen Audio Muzik elektronik Masa Utiliti Pengesah Esoterik Permainan

Bayang Kotak CSS Lembut — Kod Sedia Dibuat

Bina kod bayangan kotak CSS secara visual: peluncur untuk mengimbangi, kabur, hamparan, warna dengan kelegapan, mod inset dan sehingga empat lapisan dengan pratonton langsung.

0px
4px
12px
0px
0.25
Memproses... 0%

Hasilnya

Halaman ini membuka penjana bayang kotak yang dipramuat dengan bayang lembut: tiada offset mendatar, 8px ke bawah, 24px kabur yang besar dan 12% kelegapan hitam yang rendah. Kad pratonton memaparkannya serta-merta — dorong mana-mana peluncur dan baris CSS mengikuti dalam masa nyata.

Bayang-bayang lembut adalah tenaga kerja antara muka moden. Kabur besar yang digandingkan dengan kelegapan rendah mengangkat kad dari halaman tanpa melukis garis besar yang keras, itulah sebabnya kebanyakan sistem reka bentuk mengekalkan bayang ketinggian mereka dalam julat ini dan bukannya bayang-bayang padat dan gelap reka bentuk rata awal.

Salin garisan bayangan kotak terus ke dalam helaian gaya anda atau susun sehingga tiga lapisan lagi untuk ketinggian yang lebih kaya. Penjana berjalan sepenuhnya dalam penyemak imbas anda — tiada apa-apa yang dimuat naik di mana-mana sahaja.

🛡️
Dilaksanakan dalam Pelayar

Fail dan input anda tidak pernah meninggalkan peranti ini. Pemprosesan berjalan sepenuhnya di luar talian. 100% Selamat.

Format & Peraturan yang Diterima

  • Peluncur untuk X/Y mengimbangi, mengaburkan dan menyebar dengan bacaan piksel langsung, serta pemilih warna dengan peluncur kelegapan yang berasingan.
  • Kotak semak inset dan senarai lapisan: tambah, pilih dan alih keluar sehingga empat lapisan bayangan.
  • Garis CSS bayang kotak boleh salin meliputi semua lapisan, dipratonton pada latar belakang terang atau gelap boleh tukar.

Faedah Utama

✓ Setiap peluncur mengemas kini kad pratonton dan baris CSS serta-merta — tidak meneka rupa 0 8px 24px rgba(...) sebenarnya.
✓ Sehingga empat lapisan bayang-bayang membolehkan anda membina ketinggian yang realistik dan kesan neumorfik yang tidak dapat diungkapkan oleh penjana bayang-bayang tunggal.
✓ Togol latar belakang terang/gelap menunjukkan cara bayang anda membaca pada kedua-dua tema sebelum anda menghantarnya.

Kes Penggunaan

  • • Dail dalam bayang ketinggian lembut untuk kad produk dengan menyeret peluncur dan bukannya mengedit nilai rgba() buta.
  • • Bina kesan neumorfisme terang/gelap dua lapisan dan salin keseluruhan garisan kotak-bayang berbilang lapisan dalam satu klik.
  • • Semak pada latar belakang pratonton gelap bahawa bayang anda masih membaca dalam mod gelap sebelum menghantar tema.