Контур - CSS-трикове | CSS алманах 2025

В outlineимота в CSS тегли чертата около външната страна на даден елемент. Подобно е на границата, с изключение на това:

Винаги обикаля всички страни, не можете да посочите конкретни страни
Той не е част от модела на кутията, така че няма да повлияе на позицията на елемента или съседните елементи (хубаво за отстраняване на грешки!)

Други незначителни факти включват, че той не зачита радиус на границата (има смисъл, предполагам, тъй като не е граница) и че не винаги е правоъгълен. Ако контурът заобикаля вграден елемент с различен размер на шрифта, например, Opera ще изчертае шахматно поле около всичко това.

Често се използва от съображения за достъпност, за да се подчертае връзка, когато се раздели, без да се засяга позиционирането и по различен начин от курсора на мишката.

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

Стенография

outline: ( || || ) | inherit

Приема същите свойства като границата, но вместо това има „контур-“.

Горният стенопис би могъл да бъде написан:

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

Бележки

Не можете да зададете контур само от една (или две, или три) страни на елементите. Само от всички страни. Не съществува такова нещо като outline-top, outline-right, outline-bottom, или outline-leftкато има с border.
Опитайте да отворите конзолата на който и да е уебсайт и да стартирате document.head.insertAdjacentHTML("beforeend", "* ( outline: 1px solid red; )");- ще видите много от структурата на сайтовете по този начин.
outlineсе използва за :focusстилове по подразбиране. Не забравяйте, че ако някога премахвате outlineстилове, например a:focus ( outline: 0; ), трябва да ги добавите обратно, като използвате някакъв друг визуално различен стил.