Metmenys - CSS-gudrybės | CSS almanachas 2025

outlineCSS nuosavybė brėžia liniją aplink elemento išorėje. Tai panašu į sieną, išskyrus tai, kad:

Jis visada apeina visas puses, negalima nurodyti konkrečių pusių
Tai nėra dėžutės modelio dalis, todėl ji neturės įtakos elemento ar gretimų elementų padėčiai (malonu derinti!)

Kiti nedideli faktai apima tai, kad jis neatitinka sienos spindulio (manau, prasminga, nes tai nėra siena) ir kad jis ne visada yra stačiakampis. Pavyzdžiui, jei kontūras apeina įterptą elementą su skirtingais šrifto dydžiais, „Opera“ apgaubia visą langelį.

Jis dažnai naudojamas dėl prieinamumo priežasčių, norint pabrėžti nuorodą, kai ji yra pažymėta, nedarant įtakos padėties nustatymui, ir kitaip nei užvedus pelės žymeklį.

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

Stenografija

outline: ( || || ) | inherit

Tai užima tas pačias savybes kaip ir kraštinė, bet vietoj to yra „kontūras-“.

Pirmiau pateiktas trumpinys galėjo būti parašytas:

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

Pastabos

Negalite nustatyti kontūro tik vienoje (arba dviejose, ar trijose) elemento pusėse. Tik visos pusės. Nėra tokio dalyko, kaip outline-top, outline-right, outline-bottom, ar outline-leftkaip ten yra su border.
Pabandykite atidaryti konsolę bet kurioje svetainėje ir paleisti document.head.insertAdjacentHTML("beforeend", "* ( outline: 1px solid red; )");- taip pamatysite daugybę svetainių struktūros.
outline:focuspagal numatytuosius nustatymus naudojamas stiliams. Prisiminkite, jei kada nors pašalinsite outlinestilius, pvz. a:focus ( outline: 0; ), Turite juos vėl pridėti naudodami kitokį vizualiai skirtingą stilių.