Penjana Box Shadow CSS
Penjana box-shadow CSS dalam talian percuma. Cipta bayangan cantik secara visual dengan ofset, kabur, sebar, warna dan sisip boleh laras. Pratonton langsung dan salin kod serta-merta.
Apakah CSS box-shadow?
CSS box-shadow ialah sifat CSS yang menambah kesan bayangan di sekeliling bingkai elemen. Ia membolehkan anda mencipta bayangan drop, bayangan dalam dan pelbagai lapisan bayangan dengan menentukan ofset, jejari kabur, jejari sebar dan nilai warna.
Apakah parameter box-shadow?
Sifat box-shadow menerima beberapa nilai: ofset mendatar (X), ofset menegak (Y), jejari kabur, jejari sebar, warna dan kata kunci inset pilihan. Anda juga boleh menentukan beberapa bayangan dipisahkan oleh koma.
Apakah kata kunci inset?
Kata kunci inset menukar bayangan dari bayangan luar (bayangan drop) kepada bayangan dalam. Apabila inset ditentukan, bayangan dilukis di dalam sempadan elemen dan bukannya di luar, mencipta kesan sisipan.
Apakah jejari kabur?
Jejari kabur menentukan berapa banyak tepi bayangan menjadi kabur. Nilai 0 mencipta tepi yang tajam dan pepejal. Nilai yang lebih besar mencipta bayangan yang lebih tersebar dan lembut yang memanjang lebih jauh dari elemen.
Apakah jejari sebar?
Jejari sebar mengembangkan atau mengecutkan saiz bayangan. Nilai positif menjadikan bayangan lebih besar dari elemen, manakala nilai negatif menjadikannya lebih kecil. Ini mempengaruhi bayangan sebelum kabur digunakan.
Bagaimana cara mencipta beberapa bayangan?
Anda boleh mencipta beberapa bayangan dengan memisahkan setiap takrifan bayangan dengan koma. Setiap bayangan boleh mempunyai nilai ofset, kabur, sebar dan warna yang berbeza. Bayangan digunakan dalam urutan yang diisytiharkan, dengan bayangan pertama di atas.
Bolehkah saya menggunakan warna RGBA untuk bayangan?
Ya, anda boleh menggunakan sebarang format warna CSS termasuk RGBA, HSLA, HEX atau warna bernama. RGBA dan HSLA amat berguna untuk mencipta bayangan separa telus yang bercampur secara semula jadi dengan latar belakang.
Bagaimana cara menyalin kod CSS yang dijana?
Hanya klik butang "Salin Kod" dalam antara muka penjana. Kod CSS akan disalin ke papan keratan anda dan boleh ditampal terus ke helaian gaya atau fail HTML anda.
Adakah box-shadow disokong dalam semua pelayar?
Ya, box-shadow disokong dalam semua pelayar moden termasuk Chrome, Firefox, Safari, Edge dan Opera. Ia telah menjadi sebahagian daripada CSS3 sejak 2011 dan mempunyai keserasian pelayar yang sangat baik.
Adakah box-shadow mempengaruhi prestasi?
box-shadow mempunyai impak prestasi yang minimum pada pelayar moden. Walau bagaimanapun, menggunakan beberapa bayangan kompleks dengan jejari kabur yang besar pada banyak elemen boleh memberi kesan kepada prestasi rendering, terutamanya pada peranti mudah alih.
Apakah kes penggunaan biasa untuk box-shadow?
Penggunaan biasa termasuk mencipta kesan ketinggian kad, menambah kedalaman kepada butang, mencipta medan borang inset, melaksanakan bayangan material design dan menambah pemisahan visual antara elemen yang bertindih.
Bolehkah saya menganimasikan box-shadow?
Ya, box-shadow boleh dianimasikan menggunakan peralihan atau animasi CSS. Walau bagaimanapun, menganimasikan box-shadow boleh menjadi intensif prestasi. Untuk prestasi yang lebih baik, pertimbangkan menggunakan pseudo-elemen dengan peralihan kelegapan.
Cara Menggunakan Penjana Box Shadow CSS
Reka bayang CSS box-shadow secara visual dan bukannya meneka nilai. Penjana ini berjalan setempat dalam pelayar anda dan tiada apa-apa yang dimuat naik.
- Atur H-Offset dan V-Offset untuk menggerakkan bayang secara mendatar dan menegak.
- Naikkan Blur untuk melembutkan tepi dan gunakan Spread untuk membesar atau mengecilkan bayang.
- Pilih Color dan laraskan Opacity agar bayang kelihatan lebih lembut dan semula jadi.
- Tandakan Inset untuk melukis bayang di dalam elemen dan bukannya di sekelilingnya.
- Salin peraturan box-shadow yang siap daripada pratonton ke dalam lembaran gaya anda.
Blur kecil dengan V-Offset positif yang kecil menghasilkan bayang sentuh halus dan realistik betul-betul di bawah elemen.
Alat Berkaitan
- Penjana Border Radius CSS Penjana border-radius CSS visual. Laraskan setiap sudut secara bebas dengan pratonton masa nyata dan salin kod CSS serta-merta.
- Penjana Gradien CSS Cipta gradien CSS menakjubkan secara visual. Jana gradien linear, radial dan konikal dengan pelbagai henti warna, sudut dan kedudukan tersuai. Salin kod CSS sedia pengeluaran serta-merta.
- Penjana CSS Grid Penjana CSS Grid visual percuma dengan pratonton langsung. Reka susun atur grid responsif secara interaktif dan eksport kod CSS sedia produksi.
- Penjana CSS Flexbox Penjana CSS Flexbox visual dengan pratonton langsung. Laraskan sifat flex dan dapatkan kod CSS sedia guna.
- Penjana Border Radius Kreatif Penjana border radius kreatif percuma dalam talian. Seret 8 pemegang atau pilih pratetap blob untuk mencipta bentuk CSS organik dan menyalin kod dengan serta-merta.
- Penukar Warna Penukar warna dalam talian percuma. Tukar format HEX, RGB, HSL, HSV serta-merta dengan pemilih visual. 100% peribadi, berjalan dalam pelayar anda.
- Penjana Easing CSS Penjana easing CSS dalam talian percuma. Seret titik kawalan cubic-bezier pada lengkung interaktif, pilih dari 18 pratetap, lihat pratonton bola berulang dan salin fungsi pengmasaan serta-merta.
- Penjana Text Shadow CSS Penjana text-shadow CSS dalam talian percuma. Tindih beberapa lapisan bayang dengan ofset, kabur, warna dan kelegapan, cuba pratetap Neon, 3D, Retro dan salin CSS serta-merta.