Infälld CSS Box Shadow — Färdig kod
Bygg CSS-box-skuggkod visuellt: skjutreglage för offset, oskärpa, spridning, färg med opacitet, infällt läge och upp till fyra lager med en liveförhandsvisning.
Resultat
Den här sidan öppnar box-skugggeneratorn med den infällda kryssrutan redan markerad, så skuggan ritas inuti elementet istället för bakom det. Förhandsgranskningskortet visar den sjunkna effekten på en gång, och varje reglage uppdaterar CSS-raden live.
Infällda skuggor är hur CSS förfalskar djup som går inåt: tryckta knapptillstånd, sökfält och inmatningsbrunnar, förloppsindikatorer och graverade paneler är beroende av dem. Eftersom skuggan omsluter den inre kanten, beter sig oskärpa och spridning något annorlunda än i en vanlig skugga — reglagen här låter dig känna skillnaden direkt.
När det sjunkna utseendet är rätt, kopiera box-skugglinjen till din stilmall. Du kan också kombinera ett infällt lager med vanliga yttre lager — lägg till ett andra lager och avmarkera insättning på det för att blanda båda i en deklaration.