Zarys - CSS-Tricks | Almanach CSS 2025

outlineNieruchomość w CSS rysuje linię wokół zewnętrznej części elementu. Jest podobny do border, z wyjątkiem tego:

Zawsze krąży po wszystkich stronach, nie możesz określić poszczególnych stron
Nie jest częścią modelu pudełkowego, więc nie wpłynie na położenie elementu ani elementów sąsiednich (przyjemne do debugowania!)

Inne drobne fakty obejmują to, że nie uwzględnia border-radius (wydaje mi się, że ma to sens, ponieważ nie jest to granica) i nie zawsze jest prostokątne. Jeśli na przykład kontur obejmuje element wbudowany o różnych rozmiarach czcionek, Opera narysuje wokół niego rozłożoną ramkę.

Jest często używany ze względu na dostępność, aby uwydatnić łącze po umieszczeniu na karcie bez wpływu na pozycję iw inny sposób niż najechanie kursorem.

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

Stenografia

outline: ( || || ) | inherit

Ma te same właściwości, co border, ale zamiast tego zawiera słowo „outline-”.

Powyższy skrót można było napisać:

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

Uwagi

Nie możesz ustawić konturu tylko na jednej (lub dwóch lub trzech) stronach elementu. Tylko ze wszystkich stron. Nie ma czegoś takiego jak outline-top, outline-right, outline-bottom, lub outline-leftjak jest z border.
Spróbuj otworzyć konsolę w dowolnej witrynie i uruchomić document.head.insertAdjacentHTML("beforeend", "* ( outline: 1px solid red; )");- zobaczysz w ten sposób wiele struktur witryn.
outlinejest używany :focusdomyślnie dla stylów. Pamiętaj, że jeśli kiedykolwiek usuniesz outlinestyle, na przykład a:focus ( outline: 0; ), musisz dodać je z powrotem, używając innego rodzaju wizualnie odrębnego stylu.