Penjana CSS box-shadow
Seret peluncur dan salin CSS.
- Berjalan dalam pelayar anda — teks anda tidak pernah dihantar ke mana-mana
- Tanpa pendaftaran, tanpa kuota, percuma digunakan sebanyak mana yang anda suka
Cara ia berfungsi
Box-shadow mengambil empat nombor dan satu warna dalam susunan tertentu, dan perbezaan antara bayang yang kelihatan seperti kedalaman dengan yang kelihatan seperti pelekat sepenuhnya terletak pada nombor-nombor itu. Melihatnya berubah semasa anda menyeret jauh lebih pantas daripada meneka.
Apa maksud empat nombor itu
Mengikut susunan: ofset mendatar, ofset menegak, jejari kabur, dan sebaran. Ofset menggerakkan bayang; kabur melembutkan tepinya; sebaran membesarkan atau mengecilkannya sebelum mengaburkan. Sebaran negatif menarik bayang ke dalam, itulah cara anda mendapat bayang rapat di bawah kad tanpa meleret ke sisi.
Menjadikannya kelihatan nyata
Cahaya biasanya datang dari atas, jadi ofset menegak positif kecil tanpa ofset mendatar kelihatan semula jadi. Bayang yang besar dan sangat lut sinar kelihatan seperti kedalaman lembut; yang kecil, gelap dan tajam kelihatan seperti pelekat potongan. Objek sebenar menghasilkan bayang yang lebih kabur apabila lebih jauh daripada permukaan — kabur yang lebih besar membayangkan elemen yang lebih tinggi.
Bayang inset
Bayang inset dilukis di dalam elemen dan bukannya di luar, begitulah butang yang ditekan, medan input dan panel inset dibuat. Empat nombor yang sama terpakai, cuma menghala ke dalam.
Beberapa bayang sekali gus
CSS menerima senarai dipisahkan koma, dan melapiskan dua — satu rapat dan gelap, satu lebar dan pudar — kelihatan jauh lebih baik daripada satu sahaja. Penjana ini menghasilkan satu; tampal dua bersama sendiri untuk kesan berlapis.
Penjana CSS box-shadow — soalan lazim
Apakah susunan nilai itu?
Ofset mendatar, ofset menegak, kabur, sebaran, kemudian warna.
Apa yang dilakukan oleh sebaran negatif?
Ia mengecilkan bayang sebelum mengaburkan, yang mengekalkannya rapat di bawah elemen dan bukannya meleret ke sisi.
Apakah bayang inset?
Bayang yang dilukis di dalam elemen dan bukannya di luar — digunakan untuk butang yang ditekan dan medan input.
Bolehkah saya membuat bayang berlapis?
Bukan secara langsung. CSS menerima senarai dipisahkan koma, jadi jana dua dan tampal bersama.