Vázlat - CSS-trükkök | CSS Almanach 2025

A outlineCSS-ben lévő tulajdonság vonalt húz egy elem külső része körül. Hasonló a határhoz, kivéve, hogy:

Mindig az összes oldalt megkerüli, nem adhat meg konkrét oldalakat
Ez nem része a doboz modelljének, így nem befolyásolja az elem vagy a szomszédos elemek helyzetét (jó a hibakereséshez!)

További apróbb tények közé tartozik, hogy nem tartja tiszteletben a határsugarat (gondolom van értelme, mivel ez nem határ), és hogy nem mindig téglalap alakú. Ha például a körvonal egy betűméret körül mozog, különböző betűméretekkel, akkor az Opera egy körbeölelt mezőt rajzol az egész köré.

Gyakran akadálymentességi okokból használják, hogy hangsúlyozzák a linket, amikor a lapok fölé helyezik, anélkül, hogy ez befolyásolná a helymeghatározást, és más módon, mint a lebegés.

a:focus ( outline: 1px dashed red; )

Gyorsírás

outline: ( || || ) | inherit

Ugyanazokat a tulajdonságokat veszi fel, mint a szegély, de ehelyett „körvonal-”.

A fenti gyorsírást meg lehetett volna írni:

a:focus ( outline-width: 1px; outline-style: dashed; outline-color: red; )

Megjegyzések

Nem állíthat be vázlatot az elemek csak egy (vagy két, vagy három) oldalán. Csak minden oldal. Nincs olyan dolog, mint outline-top, outline-right, outline-bottom, vagy outline-lefthasonló van a border.
Nyissa meg a konzolt bármely webhelyen, és futtassa document.head.insertAdjacentHTML("beforeend", "* ( outline: 1px solid red; )");- a webhelyek sokaságát így látja majd.
outline:focusalapértelmezés szerint a stílusokhoz használatos . Ne felejtse el, ha valaha eltávolítja a outlinestílusokat, például a:focus ( outline: 0; )vissza kell adnia őket valamilyen más vizuálisan eltérő stílus használatával.