Kizazi cha CSS Box Shadow

CSS Output

CSS Box Shadow ni nini?

Sifa ya CSS box-shadow inaongeza athari za kivuli karibu na mfumo wa kipengele. Vivuli vinaweza kuhamishwa, kufanywa visivyo wazi, kusambazwa, kupewa rangi, na kuwekwa kama inset (kivuli cha ndani). Vivuli vingi vilivyotenganishwa na mkato vinaweza kupangwa kwa athari tajiri. Kizazi hiki hukuruhusu kujenga vivuli tata vya tabaka nyingi kwa njia ya kuona na kunakili CSS iliyoko tayari kubandikwa kwenye ubao wa kunakili.

Jinsi ya Kutumia Kizazi cha Box Shadow

Rekebisha vitetemeko vya Offset X/Y, Blur na Spread ili kuweka nafasi na umbo la kivuli.
Bonyeza kwenye sampuli ya rangi kuchagua rangi ya kivuli, na utumie kitetemeko cha Opacity kwa uwazi.
Geuza 'Inset' kuunda mwanga wa ndani au athari ya kushinikizwa.
Bonyeza '+ Ongeza tabaka' ili kupanga vivuli vingi juu ya kila mmoja.
Nakili CSS iliyotengenezwa na uibandike kwenye hati yako ya mtindo.

Maswali Yanayoulizwa Mara Kwa Mara

Kuna tofauti gani kati ya box-shadow na drop-shadow filter? box-shadow inaongeza vivuli karibu na mpaka wa mstatili wa kipengele na inasaidia vivuli vya ndani. CSS filter: drop-shadow() inatumika kwa sura ya ufahamu wa kipengele (ikiwa ni pamoja na uwazi), ikifanya ifuate miundo isiyo na mstatili kama PNG zilizo na background zenye uwazi.

Jinsi gani ninavyounda athari ya mwinuko wa kadi ya Material Design? Weka vivuli viwili vya sanduku: soft ambient shadow (blur kubwa, opacity chini, spread kidogo) na key shadow (blur ndogo, opacity juu, offset ya njia). Kwa mfano: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).

Je, box-shadow inaathiri mpango wa ukurasa? Hapana. box-shadow haiathiri ukubwa wa kipengele au nafasi yake katika mtiririko wa hati. Tofauti na outline, hailiki nafasi ya mpango na haitasogeza vipengele vingine.

Naweza kuanimatia box-shadow? Ndiyo. box-shadow inaweza kuanimatia kwa CSS transitions na animations. Kwa utendaji, chagua kucheza box-shadow tu inapohitajika — vivinjari haiwezi kuharaka kwa GPU mabadiliko ya box-shadow kwa ufanisi sawa na transform au opacity.

Keywords: kizazi CSS box shadow, box-shadow CSS, zana ya kivuli CSS, CSS drop shadow, inset shadow, kivuli cha tabaka nyingi, CSS shadow mtandaoni