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.