Oris - CSS-triki | Almanah CSS 2025

outlineHotel v CSS nariše črto okoli zunanjosti elementa. Podobno je meji, le da:

Vedno gre okoli vseh strani, določenih strani ne morete določiti
Ni del modela škatle, zato ne bo vplival na položaj elementa ali sosednjih elementov (lepo za odpravljanje napak!)

Druga manjša dejstva vključujejo, da ne spoštuje polmera meje (menda je smiselno, ker ni meja) in da ni vedno pravokoten. Če se na primer obris vrti okoli vstavljenega elementa z različnimi velikostmi pisave, bo Opera okoli vsega narisala razporejeno polje.

Pogosto se uporablja zaradi dostopnosti, da poudari povezavo na zavihku, ne da bi to vplivalo na pozicioniranje in drugače kot lebdenje.

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

Stenografija

outline: ( || || ) | inherit

Zavzame enake lastnosti kot obroba, vendar namesto tega z obrisom.

Zgornjo stenografijo bi lahko zapisali:

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

Opombe

Orisa ne morete nastaviti samo na eni (ali dveh ali treh) straneh elementov. Samo na vse strani. Ni take stvari kot outline-top, outline-right, outline-bottom, ali outline-left, kot je s border.
Poskusite odpreti konzolo na katerem koli spletnem mestu in zagnati document.head.insertAdjacentHTML("beforeend", "* ( outline: 1px solid red; )");- tako boste videli veliko mest.
outlinese :focusprivzeto uporablja za sloge. Ne pozabite, če kdaj odstranite outlinesloge, na primer a:focus ( outline: 0; ), jih morate dodati z uporabo neke druge vrste vizualno razločenega sloga.