Izklāsts - CSS-triki | CSS almanahs 2025

outlineĪpašums CSS vērš līniju ap ārpuses elementa. Tas ir līdzīgs robežai, izņemot to, ka:

Tas vienmēr iet ap visām pusēm, jūs nevarat norādīt konkrētas puses
Tā nav kastes modeļa sastāvdaļa, tāpēc tā neietekmēs elementa vai blakus esošo elementu stāvokli (jauki atkļūdošanai!)

Citi nelieli fakti ietver to, ka tas neievēro robežas rādiusu (manuprāt, ir jēga, jo tā nav robeža) un ka tas ne vienmēr ir taisnstūrveida. Piemēram, ja kontūra apņem elementu ar dažādiem burtu izmēriem, Opera ap to visu uzzīmēs pakāpenisku lodziņu.

To bieži lieto pieejamības apsvērumu dēļ, lai uzsvērtu saiti, kad tā ir pievienota, neietekmējot pozicionēšanu, un citādi nekā virzot kursoru.

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

Stenogrāfija

outline: ( || || ) | inherit

Tam nepieciešami tie paši rekvizīti kā apmalei, bet tā vietā ar “kontūru”.

Iepriekš minēto stenogrāfiju varēja uzrakstīt:

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

Piezīmes

Nevar iestatīt kontūru tikai vienā (vai divās, vai trīs) elementa malās. Tikai visas puses. Nav tādas lietas kā outline-top, outline-right, outline-bottomvai outline-left, piemēram, ir ar border.
Mēģiniet atvērt konsoli jebkurā vietnē un palaist document.head.insertAdjacentHTML("beforeend", "* ( outline: 1px solid red; )");- tādā veidā redzēsit daudz vietņu struktūru.
outline:focuspēc noklusējuma tiek izmantots stiliem. Atcerieties, ja kādreiz noņemat outlinestilus, piemēram a:focus ( outline: 0; ), jums tie jāpievieno, izmantojot cita veida vizuāli atšķirīgu stilu.