Outline og Box-Shadow
Legg til fokusmarkeringer og skyggeeffekter rundt elementer med outline og box-shadow.
Outline og Box-Shadow er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.
outline-egenskapen
outline tegner en linje utenfor border. Den påvirker ikke layouten — elementene rundt flytter seg ikke. Kortformatet følger samme mønster som for border: bredde, stil og farge.
<button class="focus-demo">Focused Button</button>
outline-offset
outline-offset flytter outline bort fra borderkanten. Positive verdier flytter den utover, mens negative verdier flytter den innover og kan gi en klippingseffekt.
<button class="focus-demo">Keyboard-focused Button</button>
outline kontra border
Viktige forskjeller:
- Outline påvirker ikke layoutflyten
- Outline kan ikke angis per side (det finnes ingen outline-top)
- Outline kan være ikke-rektangulær (følger fokusringens form i enkelte nettlesere)
- Outline er alltid utenfor border
:focus-visible kontra :focus
Foretrekk :focus-visible for fokusmarkeringer for tastatur. Outline vises bare når fokuset ble mottatt via tastaturet, ikke ved museklikk — slik unngås visuell støy for brukere som bruker pekeren, samtidig som tilgjengeligheten ivaretas.
<button class="focus-demo">Keyboard focus vs mouse click</button>
Grunnleggende om box-shadow
box-shadow legger til en skyggeeffekt rundt et element. Kortformatet er: offset-x offset-y blur-radius spread-radius color.
<div class="card">Card with soft shadow</div>
Forklaring av box-shadow-verdier
Hver verdi i box-shadow:
- offset-x: horisontal forskyvning (negativ = mot venstre)
- offset-y: vertikal forskyvning (negativ = oppover)
- blur-radius: uskarphet (0 = skarp)
- spread-radius: gjør skyggen større eller mindre
- color: skyggefarge (RGBA anbefales)
<div class="raised">Raised</div>
<div class="deep">Deep</div>
Innebygd box-shadow
Legg til nøkkelordet inset for å tegne skyggen inne i elementet og skape et inntrykk av at det er trykket inn eller ligger nedsenket.
<input class="input focus-demo" type="text" value="Focused input" />
Flere box-shadow-skygger
Skill flere skygger med komma. De legges oppå hverandre fra forgrunnen og bakover:
<span class="badge">3</span>
box-shadow kontra filter: drop-shadow
box-shadow tar bare hensyn til boksformen. filter: drop-shadow() følger den gjengitte formen, inkludert gjennomsiktighet — ideelt for PNG-ikoner med gjennomsiktige bakgrunner.
<div class="icon">★</div>
Et system for høydenivåer med box-shadow
Material Design og lignende systemer definerer flere skyggenivåer for visuell høyde. Knytt CSS-variabler til skyggeverdier:
<div class="elevation-sm">sm</div>
<div class="elevation-md">md</div>
<div class="elevation-lg">lg</div>
Effektiv animering av box-shadow
Animering av box-shadow utløser ny gjengivelse for hver ramme. Av hensyn til ytelsen kan opacity animeres på en pseudo-element-skygge, eller filter: drop-shadow() brukes, siden den kan kompositeres.
Rask kontroll
Hvilket nøkkelord i box-shadow tegner skyggen inne i elementet?
Oppsummering
outline tegner utenfor border uten å påvirke layouten — bruk den til fokusmarkeringer. box-shadow legger til dybdeskygger med forskyvning, uskarphet, spredning og farge. Bruk inset for indre skygger. Flere skygger kan legges i lag ved hjelp av komma.
Lær deg CSS med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «Outline og Box-Shadow» gratis?
Ja – hele teksten i «Outline og Box-Shadow» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Outline og Box-Shadow»?
Legg til fokusmarkeringer og skyggeeffekter rundt elementer med outline og box-shadow. Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med CSS Academy?
Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Outline og Box-Shadow»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?
Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Forstå width, height, margin og padding
- Kantlinjestil, -bredde og -farge
- Box-sizing: Content-Box kontra Border-Box
- Outline og Box-Shadow