Websites met stijl

Naslag: outline

Wat is de outline

De outline is een lijn om een element. Het wordt getoond buiten de border. Het is geschikt om een element er te laten 'uitspringen'.

Het verschil met de border is dat de outline geen deel uitmaakt van het element. De dikte van de outline heeft dus geen invloed op de afmetingen van het element.

Als je wilt dat een element bij aanwijzing met de muis een kader krijgt, kan je daar het beste de outline voor gebruiken. Want dan wordt het element bij aanwijzing niet groter.

Zie ook de naslag border

De outline aan alle zijden gelijk

De eigenschap outline kan worden gebruikt als de lijn aan alle zijden hetzelfde is.

Als dit niet het geval is, kijk bij Outline niet aan alle zijden gelijk

Vorm

• kleur: de kleur van de lijn. Die mag op elke manier worden opgegeven (naam, hsl, rgb, hex).
• stijl: zie de tabel met stijlen hieronder.
• dikte: de dikte van de lijn (thin, medium, thick, of een waarde in px).

De waarden van de outline moeten worden opgegeven in de volgorde: kleur stijl dikte. (net andersom als bij border!). Waarden mogen worden overgeslagen, bv.outline: red solid, border: double. De niet genoemde waarden zijn dan de standaard waarden.

Gedrag

• invert: de complementaire ('omgekeerde') kleur van het element. Hierdoor steekt de kleur altijd af.
• none: geen outline
• medium: medium lijndikte

Stijlen

Outline niet aan alle zijden gelijk

• Als de outline niet aan alle zijden hetzelfde is, kan de outline per zijde worden opgegeven met de eigenschappen outline-top, outline-right,outline-bottom en outline-left.
• Ook kan de outline worden opgegeven met de eigenschappen outline-width, outline-style, outline-color (Steeds voor achtereenvolgens boven, rechts, onder, links): voorbeeld outline-width: 20px, 10px, 10px, 20px;

Het gebruik is verder helemaal analoog aan dat van border.