CSS-свойство outline позволяет вам определить область контура вокруг элемента.
Контур — это линия, которая рисуется сразу за границей элемента. Контуры обычно используются для обозначения фокуса или активного состояния таких элементов как кнопки, ссылки, поля формы и т. д.
В этом разделе мы разберем, как установить стиль, цвет и ширину контура.
Как разница между Outlines и Borders
Контур (outline) выглядит очень похожим на границу (border), но имеет отличительные особенности:
- Контуры не занимают места, всегда располагаются над элементом и могут перекрывать другие элементы на странице;
- В отличие от границ, для контура не получится установить разные цвета или стили для каждой из сторон;
- Контуры не оказывают никакого влияния на окружающие элементы, кроме наложения;
- В отличие от границ, контуры не изменяют размер или положение элемента;
- Контуры могут быть не прямоугольными, но вы не можете создавать контуры в виде окружности.
Если вы наметите контур на элементе, он займет столько же места на веб-страницах, как если бы у вас не было на нем контура. Контур перекрывает поля margins (прозрачная область за пределами границы) и окружающие элементы.
Стилизация Outline
Свойство outline-style устанавливает стиль контура элемента, например: solid, dotted и т. д.
Свойство outline-style может иметь одно из следующих значений: none, solid, dashed, dotted, double, inset, outset, groove, и ridge. Теперь давайте взглянем на следующую иллюстрацию: она дает вам представление о различиях между типами стилей контура.
Значение none не отображает контур. Значения inset, outset, groove и ridge создают 3D-подобный эффект, который зависит от значения цвета контура. Обычно этот эффект достигается созданием «тени» из двух цветов, которые немного светлее и темнее, чем цвет контура.
Давайте попробуем следующий пример и посмотрим, как это работает:
h1 {
outline-style: dotted;
}
p {
outline-style: ridge;
}Вы должны указать outline-style, чтобы контур отображался вокруг элемента, потому что по умолчанию он имеет значение none. Ширина или толщина контура по умолчанию является medium, а цвет контура по умолчанию такой же, как и color текста.
Свойство outline-width
Свойство outline-width определяет ширину контура, добавляемого в элемент.
Посмотрим следующий пример, чтобы понять, как это на самом деле работает:
p {
outline-style: dashed;
outline-width: 10px;
}Ширина контура может быть указана с использованием любого значения, например, px, em, rem и т. д. Его также можно указать с помощью одного из трех ключевых слов: thin, medium, и thick Процентные или отрицательные значения недопустимы — как и свойство border-width.
Свойство outline-color
Свойство outline-color устанавливает цвет контура элемента.
Это свойство принимает те же значения, что и свойство color.
Следующие правила добавляют сплошной контур синего цвета вокруг абзацев.
p {
outline-style: solid;
outline-color: #0000ff;
}CSS-свойство outline-width или outline-color не будут работать, если используются раздельно. Используйте свойство outline-style, чтобы сначала установить стиль контура.
Сокращенное свойство outline
CSS-свойство outline является кратким свойством для установки одного или нескольких отдельных свойств outline-style, outline-width и outline-color в одном правиле.
Давайте посмотрим на следующий пример, чтобы понять, как он работает:
p {
outline: 5px solid #ff00ff;
}Если значение для отдельного свойства outline пропущено или не указано, вместо него будет использоваться значение по умолчанию для этого свойства, если оно есть.
Например, если значение для свойства outline-colorcolor элемента будет использоваться в качестве значения для контура элемента.
В следующем примере контур будет представлять собой сплошную зеленую линию шириной 5 пикселей:
p {
color: green;
outline: 5px solid;
}Но в случае outline-stylenone. В следующем примере контура не будет:
p {
outline: 5px #00ff00;
}Удаление контура outline у активных ссылок
Свойство outline используется для удаления контура вокруг активных ссылок.
Однако, рекомендуется применять некоторый альтернативный стиль, чтобы указать, что ссылка имеет фокус, т.к. на мобильных устройствах удобнее показывать какой элемент нажался.
Следующий пример показывает, как убрать контур у ссылок
a, a:acive, a:focus {
outline: none;
}
