Obris - CSS-trikovi | CSS Almanah 2025

outlineNekretnina u CSS crta liniju oko izvan elementa. Sličan je granici, osim što:

Uvijek ide oko svih strana, ne možete odrediti određene strane
Nije dio modela okvira, pa neće utjecati na položaj elementa ili susjednih elemenata (lijepo za uklanjanje pogrešaka!)

Druge manje činjenice uključuju da ne poštuje radijus granice (pretpostavljam da ima smisla jer nije granica) i da nije uvijek pravokutna. Na primjer, ako se obris vrti oko umetnutog elementa s različitim veličinama fonta, Opera će oko svega nacrtati stupnjeviti okvir.

Često se koristi iz razloga pristupačnosti kako bi se na kartici istaknula veza bez utjecaja na pozicioniranje i na drugačiji način od lebdenja.

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

Stenografija

outline: ( || || ) | inherit

Potrebna su ista svojstva kao i obrub, ali umjesto toga ima "konturu-".

Gornji stenogram mogao je biti napisan:

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

Bilješke

Ne možete postaviti obris na samo jednoj (ili dvije ili tri) strane elemenata. Samo sa svih strana. Ne postoji takva stvar kao što je outline-top, outline-right, outline-bottom, ili outline-leftkao da je s border.
Pokušajte otvoriti konzolu na bilo kojem web mjestu i pokrenuti document.head.insertAdjacentHTML("beforeend", "* ( outline: 1px solid red; )");- vidjet ćete puno struktura na takav način.
outline:focusprema zadanim postavkama koristi se za stilove. Imajte na umu da ako ikada uklonite outlinestilove, na primjer a:focus ( outline: 0; ), trebate ih vratiti u neku drugu vizualno različitu stilu.