Sådan bruger du det
- Start fra en forudindstilling, eller juster forskydning, sløring, spredning, farve og opacitet for det første lag.
- Tilføj flere lag for en mere naturlig dybde, eller sæt kryds ved “Inset” for en indre skygge.
- Skift baggrund og boksfarve i forhåndsvisningen, så de matcher dit design, og kopier derefter CSS.
Sådan fungerer det
box-shadow tager for hvert lag: vandret forskydning, lodret forskydning, blur-radius, spread-radius og farve, eventuelt indledt af inset. Positive forskydninger flytter skyggen mod højre og ned. Blur blødgør kanten og kan ikke være negativ; spread udvider (positiv) eller formindsker (negativ) skyggen, før blur påføres. Flere lag adskilles med kommaer, og det første lægges øverst.
Realistisk elevation kombinerer normalt en lille, tæt skygge med en større, blødere skygge ved lav opacitet, hvilket er det, forudindstillingen “Elevated” gør. Farver skrives som rgba(), så opaciteten er eksplicit. Skygger følger elementets border-radius og optager ikke layoutplads, så de aldrig flytter andre elementer.
Skygger med meget store blur-værdier på mange elementer kan gøre rulning langsommere på mindre kraftfulde telefoner. Hvis du animerer en skygge, er det som regel mere flydende at tone et pseudo-element ind, som allerede har skyggen, end at 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); giver et kort en skarp kant plus et blødt løft.
Fokusring uden layoutskift
Et lag med 0 forskydning, 0 blur og 3px spread i din brandfarve tegner en massiv ring omkring en knap. I modsætning til en border ændrer det ikke elementets størrelse.
Forsænket inputfelt
inset 0 2px 6px 0 rgba(0, 0, 0, 0.25) får et tekstfelt til at se en smule forsænket ud.
Ofte stillede spørgsmål
Hvad er forskellen mellem box-shadow og filter: drop-shadow()?
box-shadow følger elementets boks og border-radius og understøtter spread og inset. drop-shadow() følger den synlige form, herunder gennemsigtige områder i PNG- eller SVG-billeder, men har hverken spread eller inset.
Hvorfor bliver min skygge skåret af?
Et forældre-element med overflow: hidden beskærer alt uden for sin boks, herunder skygger. Tilføj padding til forældre-elementet, eller flyt overflow-reglen.
Hvor mange lag bør jeg bruge?
Et eller to er nok til de fleste grænseflader. Flere lag kan se blødere ud, men koster lidt mere at rendere, hvilket betyder noget i lange lister.
Privatliv
CSS'en genereres i din browser. Intet uploades eller gemmes.