Outline och box-shadow
Lägg till fokusmarkeringar och skuggeffekter runt element med outline och box-shadow.
Outline och box-shadow är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i CSS Academy innehåller totalt 4 lektioner.
Egenskapen outline
outline ritar en linje utanför border. Den påverkar inte layouten — element runtomkring flyttas inte. Kortformen följer samma format som border: width style color.
<button class="focus-demo">Focused Button</button>
outline-offset
outline-offset flyttar outline bort från borderkanten. Positiva värden flyttar den utåt, medan negativa värden flyttar den inåt och kan ge en beskärningseffekt.
<button class="focus-demo">Keyboard-focused Button</button>
outline jämfört med border
Viktiga skillnader:
- Outline påverkar inte layoutflödet
- Outline kan inte anges per sida (det finns ingen outline-top)
- Outline kan vara icke-rektangulär (följer formen på fokusmarkeringar i vissa webbläsare)
- Outline befinner sig alltid utanför border
:focus-visible jämfört med :focus
Föredra :focus-visible för fokusmarkeringar med tangentbord. Den visar outline endast när fokus erhölls via tangentbord, inte genom ett musklick — vilket undviker visuellt brus för användare som använder pekdon samtidigt som tillgängligheten bevaras.
<button class="focus-demo">Keyboard focus vs mouse click</button>
Grunderna i box-shadow
box-shadow lägger till en skuggeffekt runt ett element. Kortformen är: offset-x offset-y blur-radius spread-radius color.
<div class="card">Card with soft shadow</div>
Värdena i box-shadow förklarade
Varje värde i box-shadow:
- offset-x: horisontell förskjutning (negativt = vänster)
- offset-y: vertikal förskjutning (negativt = uppåt)
- blur-radius: mjukhet (0 = skarp)
- spread-radius: ökar eller minskar skuggans storlek
- color: skuggans färg (RGBA rekommenderas)
<div class="raised">Raised</div>
<div class="deep">Deep</div>
Inre box-shadow
Lägg till nyckelordet inset för att rita skuggan inuti elementet och skapa ett intryck av att det är intryckt eller nedsänkt.
<input class="input focus-demo" type="text" value="Focused input" />
Flera box-shadow
Separera flera skuggor med kommatecken. De staplas framifrån och bakåt:
<span class="badge">3</span>
box-shadow jämfört med filter: drop-shadow
box-shadow tar endast hänsyn till boxens form. filter: drop-shadow() följer den renderade formen, inklusive transparens — idealiskt för PNG-ikoner med transparenta bakgrunder.
<div class="icon">★</div>
Ett höjdsystem med box-shadow
Material Design och liknande system definierar flera skuggnivåer för visuell höjd. Koppla CSS-variabler till skuggvärden:
<div class="elevation-sm">sm</div>
<div class="elevation-md">md</div>
<div class="elevation-lg">lg</div>
Effektiv animering av box-shadow
Att animera box-shadow utlöser ommålning i varje bildruta. För bättre prestanda kan opacity för ett pseudo-element med skuggan animeras, eller så kan filter: drop-shadow() användas eftersom det kan kompositioneras.
Snabb kontroll
Vilket nyckelord för box-shadow ritar skuggan inuti elementet?
Sammanfattning
outline ritar utanför border utan att påverka layouten — använd det för fokusindikatorer. box-shadow lägger till djup med förskjutning, oskärpa, spridning och färg. Använd inset för inre skuggor. Flera skuggor kan lagras i lager med kommatecken.
Lär dig CSS med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”Outline och box-shadow” gratis?
Ja – hela texten till ”Outline och box-shadow” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i CSS Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Outline och box-shadow”?
Lägg till fokusmarkeringar och skuggeffekter runt element med outline och box-shadow. Ni övar på CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig CSS Academy?
Du behöver inga förkunskaper. Utbildningen i CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Outline och box-shadow”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här CSS Academy-lektionen?
Ja. Varje CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Förstå width, height, margin och padding
- Kantlinjers stil, bredd och färg
- Box-sizing: content-box jämfört med border-box
- Outline och box-shadow