DevTulz Online

CSS Box Shadow Generaator

Taust

Mis on CSS Box Shadow?

CSS-i omadus box-shadow lisab varjuefekte elemendi raami ümber. Varje saab nihutada, hägustada, levitada, värvida ja seada inset-ina (sisemine vari). Mitu komaga eraldatud varju saab kihistada rikkalike efektide saavutamiseks. See generaator võimaldab teil visuaalselt luua keerulisi mitmekihilisi varje ja kopeerida kleepimiseks valmis CSS lõikelauale.

Kuidas kasutada Box Shadow Generaatorit

  1. Reguleerige Offset X/Y, Blur ja Spread liugureid varju positsioneerimiseks ja kujundamiseks.

  2. Klõpsake värviproovil varju värvi valimiseks ja kasutage läbipaistvuse jaoks Opacity liugurit.

  3. Lülitage 'Inset' sisse sisemise hõõguse või vajutusefekti loomiseks.

  4. Klõpsake '+ Lisa kiht', et virnastada mitu varju üksteise peale.

  5. Kopeerige loodud CSS ja kleepige see oma stiililehele.

Korduma Kippuvad Küsimused

Mis on erinevus box-shadow ja drop-shadow filtri vahel? box-shadow lisab varjud elemendi ristkülikukujulise piiriakna ümber ja toetab sissepoole varjusid. CSS filter: drop-shadow() rakendub elemendi visuaalsele kujule (sh läbipaistvus), võimaldades tal järgida mittekülgkülgisia kontuure, nagu PNG-d läbipaistvate taustadega.

Kuidas luua Material Design kaardi elevatsiooniefekti? Virna kaks box-shadow varjut: pehme ümbritsev vari (suur ähmasus, madal läbipaistus, veidi levik) ja peamine vari (väiksem ähmasus, kõrgem läbipaistus, suunaline nihe). Näiteks: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).

Kas box-shadow mõjutab lehe paigutust? Ei. box-shadow ei mõjuta elemendi suurust ega asukohta dokumendi voos. Erinevalt outline-ist ei võta see paigutusruumi ja ei liiguta teisi elemente.

Kas saan box-shadow animeerida? Jah. box-shadow on animeeritav CSS transitsioone ja animatsioone kasutades. Jõudluse jaoks eelistage box-shadow animeerimist ainult vajadusel — brauserid ei saa box-shadow muutusi GPU-ga kiirendada nii tõhusalt kui transform või opacity.

Keywords: CSS box shadow generaator, box-shadow CSS, CSS varju tööriist, CSS drop shadow, sisemine vari, mitmekihiline vari, CSS shadow veebis