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