CSS Outline Styles

Контуры CSS – это больше, чем просто граница

Свойство CSS CSS является непонятным. Когда вы впервые узнаете об этом, трудно понять, как это даже отдаленно отличается от свойства border. W3C объясняет это тем, что имеет следующие отличия:

  • Контуры не занимают места.
  • Контуры могут быть не прямоугольными.

Контуры не занимают места

Это утверждение само по себе сбивает с толку. Как объект на вашей веб-странице не может занимать место на веб-странице? Но если вы думаете о своей веб-странице как о луке, каждый элемент на странице может быть размещен поверх другого элемента. Свойство outline не занимает места, потому что оно всегда помещается поверх поля элемента.

Когда контур размещается вокруг элемента, это никак не влияет на расположение этого элемента на странице. Это не меняет размер или положение элемента. Если вы наметите контур элемента, он займет столько же места, как если бы у вас не было контура этого элемента. Это не относится к границе. Граница элемента добавляется к внешней ширине и высоте элемента. Таким образом, если бы у вас было изображение шириной 50 пикселей с 2-пиксельной рамкой, оно заняло бы 54 пикселя (2 пикселя для каждой боковой границы). Это же изображение с двухпиксельным контуром будет занимать всего 50 пикселей на странице, контур будет отображаться по внешнему краю изображения.

Контуры могут быть не прямоугольными

Прежде чем начать думать “круто, теперь я могу рисовать круги”, подумайте еще раз. Это утверждение имеет иной смысл, чем вы думаете. Когда вы помещаете границу в элемент, браузер интерпретирует элемент, как если бы это был один гигантский прямоугольник. Если окно разбито на несколько строк, браузер просто оставляет края открытыми, потому что поле не закрыто. Как будто браузер видит границу с бесконечно широким экраном – достаточно широким, чтобы эта граница была одним непрерывным прямоугольником.

В отличие от этого свойство outline учитывает ребра. Если выделенный элемент занимает несколько строк, контур закрывается в конце строки и снова открывается на следующей строке. Если возможно, контур будет оставаться полностью связанным, создавая непрямоугольную форму.

Использование Outline Property

Одним из лучших вариантов использования свойства outline является выделение поисковых терминов. Многие сайты делают это с цветом фона, но вы также можете использовать свойство outline и не беспокоиться о добавлении лишних интервалов на свои страницы.

Свойство outline-color принимает термин «инвертировать», что делает цвет контура обратным к текущему фону. Это позволяет выделять элементы на динамических веб-страницах без необходимости знать, какие цвета используются.

Вы также можете использовать свойство outline, чтобы удалить пунктирную линию вокруг активных ссылок. Эта статья из CSS-Tricks показывает, как удалить пунктирный контур.

Оцените статью
Solutics.ru
Добавить комментарий