Наброски - CSS-хитрости | CSS Альманах 2024

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; ), вам нужно добавить их обратно, используя какой-то другой визуально отличный стиль.