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-color отсутствует или не указано при установке контуров, свойство color элемента будет использоваться в качестве значения для контура элемента.

В следующем примере контур будет представлять собой сплошную зеленую линию шириной 5 пикселей:

p {
    color: green;
    outline: 5px solid;
}

Но в случае outline-style отсутствие значения не будет отображать контуры вообще, поскольку значением по умолчанию для этого свойства является none. В следующем примере контура не будет:

p {
    outline: 5px #00ff00;
}

Удаление контура outline у активных ссылок

Свойство outline используется для удаления контура вокруг активных ссылок.

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

Следующий пример показывает, как убрать контур у ссылок

a, a:acive, a:focus {
    outline: none;
}

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.