Ülevaade - CSS-trikid | CSS-i almanahh 2025

outlineCSS-is olev omadus tõmbab joone ümber elemendi väliskülje. See sarnaneb piiriga, välja arvatud see:

See käib alati kõikidest külgedest ringi, konkreetseid külgi ei saa täpsustada
See ei ole kasti mudeli osa, nii et see ei mõjuta elemendi ega sellega külgnevate elementide asukohta (hea silumiseks!)

Muud väiksemad faktid hõlmavad seda, et see ei austa piiri raadiust (ma arvan, et see on mõistlik, kuna see pole piir) ja see pole alati ristkülikukujuline. Kui kontuur läheb näiteks erineva fondisuurusega joondatud elemendi ümber, joonistab Opera selle kõige ümber astmelise kasti.

Seda kasutatakse sageli juurdepääsetavuse huvides, et rõhutada linki, kui see on sakitud, ilma et see mõjutaks positsioneerimist ja muul viisil kui hõljumine.

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

Lühike

outline: ( || || ) | inherit

See võtab samad omadused nagu ääris, kuid selle asemel on „kontuur”.

Ülaltoodud stenogrammi oleks võinud kirjutada:

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

Märkused

Te ei saa määrata kontuuri ainult ühele (või kahele või kolmele) elemendi küljele. Ainult kõik pooled. Ei ole olemas sellist asja nagu outline-top, outline-right, outline-bottom, või outline-leftnagu on koos border.
Proovige igal veebisaidil konsool avada ja käivitada document.head.insertAdjacentHTML("beforeend", "* ( outline: 1px solid red; )");- näete paljusid saitide ülesehitust.
outlinekasutatakse :focusstiilide jaoks vaikimisi. Pidage meeles, et kui eemaldate kunagi outlinestiilid, a:focus ( outline: 0; )peate need uuesti lisama, kasutades mõnda muud visuaalselt eristuvat stiili.