В CSS контурное свойство сбивает с толку. Когда вы впервые узнаете об этом, трудно понять, чем оно хотя бы отдаленно отличается от свойства border. W3C объясняет, что он имеет следующие отличия:
- Очертания не занимают места.
- Контуры могут быть непрямоугольными.
Контуры не занимают места
Это утверждение само по себе сбивает с толку. Как может объект на вашей веб-странице не занимать место на веб-странице? Но если вы думаете о своей веб-странице как о луковице, каждый элемент на странице может быть наложен на другой элемент. Свойство контура не занимает места, потому что оно всегда размещается над рамкой элемента.
Когда контур размещается вокруг элемента, это не влияет на то, как этот элемент размещается на странице. Он не меняет размер или положение элемента. Если вы поместите контур на элемент, он займет столько же места, как если бы у вас не было контура этого элемента. Это не так граница. Граница элемента добавляется к внешней ширине и высоте элемента. Итак, если бы у вас был изображение
шириной 50 пикселей с границей в 2 пикселя он будет занимать 54 пикселя (по 2 пикселя на каждую боковую границу). То же изображение с двухпиксельным контуром будет занимать на вашей странице всего 50 пикселей по ширине, контур будет отображаться по внешнему краю изображения.Контуры могут быть непрямоугольными
Прежде чем вы начнете думать «круто, теперь я могу рисовать круги», подумайте еще раз. Это утверждение имеет иное значение, чем вы думаете. Когда вы устанавливаете рамку на элемент, браузер интерпретирует элемент, как если бы это была одна гигантская прямоугольная коробка. Если поле разбивается на несколько строк, браузер просто оставляет края открытыми, потому что поле не закрыто. Это как если бы браузер видит границу с бесконечно широким экраном - достаточно широким, чтобы эта граница представляла собой один непрерывный прямоугольник.
Напротив, свойство контура учитывает края. Если выделенный элемент занимает несколько строк, контур закрывается в конце строки и снова открывается на следующей строке. Если возможно, контур также останется полностью связанным, создавая непрямоугольную форму.
Использование свойства Outline
Одно из лучших применений свойства схемы - выделение условий поиска. Многие сайты делают это с помощью цвета фона, но вы также можете использовать свойство контура и не беспокоиться о добавлении дополнительных интервалов на своих страницах.
Свойство outline-color принимает термин «инвертировать», который делает цвет контура инверсным текущему фону. Это позволяет выделять элементы на динамических веб-страницах, не зная, что именно цвета используются.
Вы также можете использовать свойство контура, чтобы удалить пунктирную линию вокруг активных ссылок. Эта статья из CSS-хитрости показывает, как удалить пунктирный контур.