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

Inset CSS Box Shadow — 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 dengan kotak semak inset sudah ditandakan, jadi bayang-bayang dilukis di dalam elemen dan bukannya di belakangnya. Kad pratonton menunjukkan kesan tenggelam sekaligus, dan setiap peluncur terus mengemas kini baris CSS secara langsung.

Bayang-bayang sisipan ialah cara kedalaman palsu CSS masuk ke dalam: keadaan butang yang ditekan, medan carian dan telaga input, palung bar kemajuan dan panel berukir semuanya bergantung padanya. Oleh kerana bayang-bayang itu memeluk pinggir dalam, kabur dan hamparan berkelakuan sedikit berbeza daripada bayang-bayang jatuh biasa — peluncur di sini membolehkan anda merasakan perbezaan itu serta-merta.

Apabila rupa cekung betul, salin garis bayang kotak ke dalam lembaran gaya anda. Anda juga boleh menggabungkan lapisan inset dengan lapisan luar biasa — tambahkan lapisan kedua dan nyahtanda inset padanya untuk mencampurkan kedua-duanya dalam satu pengisytiharan.

🛡️
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.