DevTulz Online

CSS Box Shadow Generator

Baggrund

Hvad er CSS Box Shadow?

CSS-egenskaben box-shadow tilføjer skyggeeffekter rundt om et elements ramme. Skygger kan forskydes, sløres, spredes, farves og indstilles som inset (indre skygge). Flere kommaseparerede skygger kan lagdeles for rige effekter. Denne generator lader dig bygge komplekse flerlags-skygger visuelt og kopiere den klar-til-indsæt CSS til udklipsholderen.

Sådan bruges Box Shadow Generatoren

  1. Juster skyderne for Offset X/Y, Blur og Spread for at placere og forme skyggen.

  2. Klik på farvefeltet for at vælge en skyggefarve, og brug Opacity-skyderen til gennemsigtighed.

  3. Slå 'Inset' til for at skabe en indre glød eller et trykket effekt.

  4. Klik på '+ Tilføj lag' for at stable flere skygger oven på hinanden.

  5. Kopiér den genererede CSS og indsæt den i dit stylesheet.

Ofte Stillede Spørgsmål

Hvad er forskellen mellem box-shadow og drop-shadow filter? box-shadow tilføjer skygger omkring elementets rektangulære grænse og understøtter indvendige skygger. CSS-filteret: drop-shadow() gælder for elementets visuelle form (inklusive gennemsigtighed), hvilket gør det følge ikke-rektangulære konturer som PNG'er med transparent baggrund.

Hvordan opretter jeg en Material Design-kortelevationseffekt? Stack to bokseskygger: en blød omgivende skygge (stor sløring, lav opacitet, lidt udbredes) og en nøgleskygge (mindre sløring, højere opacitet, retningsbestemt offset). For eksempel: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).

Påvirker box-shadow sidelayoutet? Nej. box-shadow påvirker ikke elementets størrelse eller position i dokumentflowet. I modsætning til outline tager det ikke layoutplads op og skyver ikke andre elementer rundt.

Kan jeg animere box-shadow? Ja. box-shadow kan animeres med CSS-overgange og animationer. For ydeevne skal du helst kun overgangsbeskære box-shadow når det er nødvendigt — browsere kan ikke GPU-accelerere box-shadow-ændringer så effektivt som transform eller opacity.

Keywords: CSS box shadow generator, box-shadow CSS, CSS skyggeværktøj, CSS drop shadow, indvendig skygge, flerlags skygge, CSS shadow online