Så här använder du det
- Utgå från en förinställning eller justera det första lagrets förskjutning, oskärpa, spridning, färg och opacitet.
- Lägg till fler lager för ett mer naturligt djup, eller markera ”Inset” för en inre skugga.
- Ändra förhandsvisningens bakgrund och boxfärg så att de matchar din design, och kopiera sedan CSS:en.
Så fungerar det
box-shadow tar, per lager: horisontell förskjutning, vertikal förskjutning, oskärperadie, spridningsradie och färg, eventuellt föregånget av inset. Positiva förskjutningar flyttar skuggan åt höger och nedåt. Oskärpan mjukar upp kanten och kan inte vara negativ; spridningen växer (positiv) eller krymper (negativ) skuggan före oskärpan. Flera lager separeras med kommatecken och det första lagret ritas överst.
Realistisk höjd kombinerar oftast en liten, tät skugga med en större, mjukare skugga med låg opacitet, vilket är vad förinställningen ”Elevated” gör. Färger skrivs som rgba() så att opaciteten är tydlig. Skuggor följer elementets border-radius och tar inte upp layoututrymme, så de flyttar aldrig andra element.
Skuggor med mycket stora oskärpevärden på många element kan göra rullningen långsammare på enklare mobiler. Om du animerar en skugga är det oftast mjukare att tona in ett pseudo-element som redan har skuggan än att animera själva box-shadow.
Exempel
Kort på en ljus sida
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 8px 24px -4px rgba(0, 0, 0, 0.18); ger ett kort en skarp kant plus en mjuk lyftning.
Fokusring utan layoutförskjutning
Ett lager med 0 förskjutning, 0 oskärpa och 3 px spridning i din varumärkesfärg ritar en heldragen ring runt en knapp. Till skillnad från en ram ändrar det inte elementets storlek.
Intryckt inmatningsfält
inset 0 2px 6px 0 rgba(0, 0, 0, 0.25) får ett textfält att se lätt infällt ut.
Vanliga frågor
Vad är skillnaden mellan box-shadow och filter: drop-shadow()?
box-shadow följer elementets box och border-radius och stöder spread och inset. drop-shadow() följer den synliga formen, inklusive genomskinliga områden i PNG- eller SVG-bilder, men saknar spread och inset.
Varför kapas min skugga?
Ett förälderelement med overflow: hidden klipper allt utanför sin box, inklusive skuggor. Lägg till padding på förälderelementet eller flytta overflow-regeln.
Hur många lager bör jag använda?
En eller två räcker för de flesta gränssnitt. Fler lager kan se mjukare ut men kostar lite mer att rita, vilket spelar roll i långa listor.
Integritet
CSS-koden genereras i din webbläsare. Ingenting laddas upp eller lagras.