CSS Box Shadow Generator
Gratis online CSS box-shadow generator. Opret smukke skygger visuelt med justerbar forskydning, sløring, spredning, farve og indsat. Live forhåndsvisning og øjeblikkelig kodekopiering.
Hvad er CSS box-shadow?
CSS box-shadow er en CSS-egenskab, der tilføjer skyggeeffekter omkring et elements ramme. Det giver dig mulighed for at oprette drop shadows, indre skygger og flere skyggelag ved at angive forskydning, sløringsradius, spredningsradius og farveværdier.
Hvad er parametrene for box-shadow?
box-shadow-egenskaben accepterer flere værdier: vandret forskydning (X), lodret forskydning (Y), sløringsradius, spredningsradius, farve og det valgfri nøgleord inset. Du kan også angive flere skygger adskilt af kommaer.
Hvad er nøgleordet inset?
Nøgleordet inset ændrer skyggen fra en ydre skygge (drop shadow) til en indre skygge. Når inset er angivet, tegnes skyggen inden for elementets kant i stedet for udenfor, hvilket skaber en inset-effekt.
Hvad er sløringsradius?
Sløringsradius bestemmer, hvor meget skyggens kant sløres. En værdi på 0 skaber en skarp, solid kant. Større værdier skaber en mere diffus, blødere skygge, der strækker sig længere fra elementet.
Hvad er spredningsradius?
Spredningsradius udvider eller sammentrækker skyggens størrelse. Positive værdier gør skyggen større end elementet, mens negative værdier gør den mindre. Dette påvirker skyggen, før sløring anvendes.
Hvordan opretter jeg flere skygger?
Du kan oprette flere skygger ved at adskille hver skyggedefinition med et komma. Hver skygge kan have forskellige forskydnings-, slørings-, sprednings- og farveværdier. Skygger anvendes i den rækkefølge, de er erklæret, med den første skygge øverst.
Kan jeg bruge RGBA-farver til skygger?
Ja, du kan bruge ethvert CSS-farveformat, herunder RGBA, HSLA, HEX eller navngivne farver. RGBA og HSLA er særligt nyttige til at oprette halvtransparente skygger, der blandes naturligt med baggrunde.
Hvordan kopierer jeg den genererede CSS-kode?
Bare klik på "Kopier kode"-knappen i generatorgrænsefladen. CSS-koden kopieres til din udklipsholder og kan indsættes direkte i dit stylesheet eller din HTML-fil.
Understøttes box-shadow i alle browsere?
Ja, box-shadow understøttes i alle moderne browsere, herunder Chrome, Firefox, Safari, Edge og Opera. Det har været en del af CSS3 siden 2011 og har fremragende browserkompatibilitet.
Påvirker box-shadow ydeevnen?
box-shadow har minimal indvirkning på ydeevnen for moderne browsere. Brug af flere komplekse skygger med stor sløringsradius på mange elementer kan dog påvirke renderingsydeevnen, især på mobile enheder.
Hvad er almindelige brugstilfælde for box-shadow?
Almindelige anvendelser inkluderer at oprette kort hævelseseffekter, tilføje dybde til knapper, oprette inset-formularfelter, implementere material design-skygger og tilføje visuel adskillelse mellem overlappende elementer.
Kan jeg animere box-shadow?
Ja, box-shadow kan animeres ved hjælp af CSS-overgange eller animationer. At animere box-shadow kan dog være ydeevnekrævende. For bedre ydeevne kan du overveje at bruge pseudo-elementer med opacitetsovergange i stedet.