Slik bruker du det
- Start fra en forhåndsinnstilling, eller juster det første lagets forskyvning, uskarphet, spredning, farge og opasitet.
- Legg til flere lag for mer naturlig dybde, eller huk av for «Inset» for en indre skygge.
- Endre forhåndsvisningsbakgrunnen og boksfargen slik at de passer til designet ditt, og kopier deretter CSS-en.
Slik fungerer det
box-shadow tar, per lag: horisontal forskyvning, vertikal forskyvning, uskarphetsradius, spredningsradius og farge, eventuelt innledet med inset. Positive forskyvninger flytter skyggen mot høyre og nedover. Uskarphet mykner kanten og kan ikke være negativ; spredning vokser (positiv) eller krymper (negativ) skyggen før uskarpheten legges på. Flere lag skilles med komma, og det første laget males øverst.
Realistisk høyde kombinerer vanligvis en liten, tett skygge med en større, mykere skygge med lav opasitet, som er det forhåndsinnstillingen «Elevated» gjør. Farger skrives som rgba() slik at opasiteten er eksplisitt. Skygger følger elementets border-radius og tar ikke opp plass i layouten, så de flytter aldri andre elementer.
Skygger med svært store uskarphetsverdier på mange elementer kan gjøre rulling tregere på enklere telefoner. Hvis du animerer en skygge, er det vanligvis jevnere å tone inn et pseudo-element som allerede har skyggen, enn å animere selve box-shadow.
Eksempler
Kort på en lys side
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 8px 24px -4px rgba(0, 0, 0, 0.18); gir et kort en skarp kant og et mykt løft.
Fokusring uten layoutforskyvning
Et lag med 0 forskyvning, 0 uskarphet og 3px spredning i profilfargen tegner en heltrukken ring rundt en knapp. I motsetning til en ramme endrer den ikke elementets størrelse.
Inntrykket tekstfelt
inset 0 2px 6px 0 rgba(0, 0, 0, 0.25) får et tekstfelt til å se litt nedsenket ut.
Ofte stilte spørsmål
Hva er forskjellen mellom box-shadow og filter: drop-shadow()?
box-shadow følger elementets boks og border-radius og støtter spread og inset. drop-shadow() følger den synlige formen, inkludert gjennomsiktige områder i PNG- eller SVG-bilder, men har verken spread eller inset.
Hvorfor blir skyggen min kuttet av?
En forelder med overflow: hidden beskjærer alt utenfor boksen sin, inkludert skygger. Legg til padding på forelderen eller flytt overflow-regelen.
Hvor mange lag bør jeg bruke?
Én eller to er nok for de fleste grensesnitt. Flere lag kan se mykere ut, men koster litt mer å tegne, noe som har betydning i lange lister.
Personvern
CSS-en genereres i nettleseren din. Ingenting lastes opp eller lagres.