Penjana Box Shadow

Seret gelongsor untuk membentuk box-shadow, susun lapisan untuk kedalaman, dan salin CSS yang telah siap serta-merta.

Lapisan bayang
Lapisan 1
CSS
Laraskan gelongsor untuk membentuk bayang anda.

Setiap bayang dipaparkan dalam penyemak imbas anda. Tiada apa-apa yang anda tetapkan di sini akan dimuat naik ke BroBroGo.

Soalan Lazim

Apakah yang sebenarnya dikawal oleh ofset, kabur dan sebaran?

Ofset menggerakkan bayang ke kiri/kanan dan atas/bawah, kabur melembutkan tepinya, dan sebaran membesarkan atau mengecilkan bayang sebelum dikaburkan. Sebaran negatif menarik bayang ke dalam, berguna untuk bayang yang rapat dan ketat.

Apakah fungsi pilihan inset?

Bayang biasa jatuh di luar elemen, seperti cahaya di belakang kad yang timbul. Inset membalikkannya ke dalam, jadi elemen kelihatan tertekan ke dalam — berguna untuk input tenggelam atau butang yang ditekan.

Mengapakah perlu menyusun lebih daripada satu lapisan bayang?

Satu bayang kelihatan rata melebihi saiz tertentu. Ketinggian sebenar biasanya menggabungkan bayang gelap yang rapat dengan bayang yang lebih lembut dan lebar — tambah lapisan kedua dan selaraskan setiap satu secara berasingan untuk mendapatkan kesan tersebut.

Ditulis dan disemak oleh pasukan editorial BroBroGo.Terakhir dikemas kini:

Memahami Sifat CSS box-shadow

Sifat box-shadow dalam CSS membolehkan pereka dan pembangun web menambah kesan bayang pada elemen HTML. Kesan ini memberikan dimensi kedalaman pada reka bentuk rata, membantu membezakan antara elemen latar belakang dan elemen hadapan. Penjana Box Shadow menyediakan antara muka visual untuk melaraskan parameter bayang ini secara langsung tanpa perlu menulis kod secara manual.

Setiap bayang ditakrifkan oleh beberapa nilai utama: ofset mendatar, ofset menegak, jejari kabur, jejari sebaran, warna, dan kelegapan. Alat ini membolehkan anda mengawal setiap parameter ini menggunakan gelongsor untuk melihat perubahan secara masa nyata.

Peranan Ofset, Kabur, dan Sebaran dalam Reka Bentuk Bayang

Visualisasi bayang yang realistik bergantung pada pemahaman tentang bagaimana parameter fizikal berinteraksi antara satu sama lain:

  • Ofset mendatar: Menggerakkan bayang ke kiri atau ke kanan. Julat nilai yang disediakan adalah dari -50px hingga 50px. Nilai positif menggerakkan bayang ke kanan, manakala nilai negatif menggerakkannya ke kiri.
  • Ofset menegak: Menggerakkan bayang ke atas atau ke bawah. Julat nilai adalah dari -50px hingga 50px. Nilai positif menggerakkan bayang ke bawah, manakala nilai negatif menggerakkannya ke atas.
  • Kabur (Blur): Melembutkan tepi bayang. Julat nilai adalah dari 0px (tepi tajam sepenuhnya) hingga 100px (sangat kabur).
  • Sebaran: Membesarkan atau mengecilkan saiz bayang sebelum kesan kabur dikenakan. Julat nilai adalah dari -50px hingga 50px. Nilai positif mengembangkan bayang ke luar, manakala nilai sebaran negatif menarik bayang ke dalam.

Perbezaan Antara Bayang Normal dan Bayang Inset

Secara lalai, bayang yang dihasilkan adalah bayang luaran yang diproyeksikan di luar sempadan elemen. Ini memberikan ilusi bahawa elemen tersebut terapung di atas latar belakang, seperti kad yang timbul.

Apabila pilihan "Bayang inset" diaktifkan, arah bayang akan diterbalikkan. Bayang akan dipaparkan di dalam elemen, mewujudkan kesan seolah-olah elemen tersebut terbenam atau ditekan ke dalam permukaan. Teknik ini sangat berguna untuk mereka bentuk elemen borang seperti medan input yang tenggelam atau butang yang sedang ditekan.

Teknik Kedalaman dengan Menyusun Berbilang Lapisan Bayang

Satu lapisan bayang tunggal sering kali kelihatan rata dan tidak realistik apabila saiznya dibesarkan. Di dunia nyata, cahaya yang dihalang oleh objek menghasilkan bayang-bayang yang kompleks dengan kepekatan yang berbeza-beza.

Untuk mencapai kesan visual yang lebih realistik dan halus, anda boleh menyusun berbilang lapisan bayang. Penjana Box Shadow membolehkan anda menambah lapisan tambahan menggunakan butang "Tambah lapisan" dan membuangnya dengan "Buang lapisan". Alat ini menyediakan pra-paparan lima lapisan, dengan lapisan pertama mempunyai nilai lalai 0 8 24 -4 dan kelegapan hitam lutsinar sebanyak 18%, manakala lapisan-lapisan lain disembunyikan pada mulanya.

Apabila berbilang lapisan digunakan, kod CSS yang dihasilkan akan menggabungkan semua lapisan tersebut sebagai nilai yang dipisahkan oleh tanda koma dalam satu pengisytiharan box-shadow.

Pemprosesan Tempatan dan Privasi Data

Setiap bayang dipaparkan dalam penyemak imbas anda. Tiada apa-apa yang anda tetapkan di sini akan dimuat naik ke BroBroGo. Semua pengiraan parameter dan penjanaan kod CSS berlaku sepenuhnya pada peranti anda secara tempatan.

Soalan Lazim (FAQ)

Apakah yang sebenarnya dikawal oleh ofset, kabur dan sebaran? Ofset menggerakkan bayang ke kiri/kanan dan atas/bawah, kabur melembutkan tepinya, dan sebaran membesarkan atau mengecilkan bayang sebelum dikaburkan. Sebaran negatif menarik bayang ke dalam, berguna untuk bayang yang rapat dan ketat.

Apakah fungsi pilihan inset? Bayang biasa jatuh di luar elemen, seperti cahaya di belakang kad yang timbul. Inset membalikkannya ke dalam, jadi elemen kelihatan tertekan ke dalam — berguna untuk input tenggelam atau butang yang ditekan.

Mengapakah perlu menyusun lebih daripada satu lapisan bayang? Satu bayang kelihatan rata melebihi saiz tertentu. Ketinggian sebenar biasanya menggabungkan bayang gelap yang rapat dengan bayang yang lebih lembut dan lebar — tambah lapisan kedua dan selaraskan setiap satu secara berasingan untuk mendapatkan kesan tersebut.

Bagaimanakah cara menggunakan kod CSS yang dihasilkan? Selepas melaraskan parameter seperti "Ofset mendatar", "Ofset menegak", "Kabur", "Sebaran", "Warna bayang", "Kelegapan", dan "Bayang inset", anda hanya perlu menekan butang "Salin CSS" untuk menyalin kod yang dijana secara masa nyata ke papan klip anda.

Penjana CSS Cubic BezierSeret dua pemegang untuk membentuk keluk pelonggaran, lihat titik bergerak melaluinya berbanding keluk yang stabil, dan salin nilai cubic-bezier().Penjana KecerunanBina kecerunan linear, jejarian atau konik, tambah hentian warna dan tetapkan arah, kemudian salin CSS dalam satu klik.Penjana Border RadiusBulatkan setiap bucu dengan gelongsor, bentuk gumpalan organik dengan mod elips, dan salin CSS serta-merta.Penjana FlexboxSediakan bekas flex dan itemnya dengan kawalan visual, lihat reka letak bertindak balas secara langsung, dan salin CSS dalam satu klik.Penjana CSS GridTetapkan lajur dan baris anda, seret merentasi sel untuk meletakkan item, dan salin CSS grid dengan HTML yang sepadan dalam satu klik.Kalkulator CSS clamp()Masukkan saiz untuk skrin kecil dan besar dan dapatkan nilai clamp() bendalir yang diskalakan dengan lancar di antaranya — untuk saiz fon, padding, margin atau gap.Penukar WarnaTukar warna antara HEX, RGB, HSL, HSV, CMYK dan LAB — edit mana-mana medan dan yang lain akan dikemas kini semasa anda menaip.Alat Perkemas & Kecilkan CSSSusun semula inden CSS yang berselerak untuk mudah dibaca, atau kecilkan saiznya untuk dilancarkan — dengan mod selamat yang tidak akan mengubah susunan peraturan anda.Pemeriksa KontrasMasukkan teks dan warna latar belakang untuk melihat nisbah kontras WCAG dan tahap AA serta AAA yang lulus.