Урок с практикой по CSS (Онлайн курсы)
Выбрать другой урок из курса
Обсуждение
Теория урока

Свойство outline для создания внешних границ

Свойство outline похоже на border, только имеет свои особенности. Во-первых, оно не влияет на положение и размер самого элемента. Во-вторых, оно не занимает место и не влияет на другие элементы, т.е. накладывается поверх них. В-третьих, свойство border-radius не работает. Это свойство работает по умолчанию, например, для input при получении фокуса. Далее рассмотрим синтаксис:

Код CSS
div {
outline: width style color;
}

Снова повторюсь, что width, style, color могут быть в любой последовательности. Значение width, это толщина границы, измеряемая в допустимых для CSS единицах измерения. Значение color, это цвет рамки, значение тоже может быть любое, разрешенное в CSS. Значение style устанавливает стиль границы, и он может быть следующим:

  • dotted - пунктирная линия
  • dashed - тоже пунктирная, но штрихи чуть-чуть длинее
  • solid - обычная, сплошная линия
  • double - двойная сплошная линия
  • groove - градиент с затемнением наружу
  • ridge - градиент с затемнением внутрь
  • inset - тоже градиент
  • outset - и это градиент

Далее посмотрим пример создания внешней границы толщиной 2 пикселя, сплошной и черного цвета:

Код CSS
div {
outline: 2px solid #000;
}

Совместно со свойством outline можно использовать свойства outline-width, outline-color и outline-style, где устанавливается толщина рамки, цвет и стиль соответственно. В отличие от border-*, устанавливать, outline-* не дает возможность устанавливать параметр для каждой стороны рамки отдельно (где * - это width, color и style).

Еще есть свойство outline-offset, которое позволяет установить расстояние между рамкой, созданной при помощи свойства outline и краем или границей элемента. Например, можно задать отрицательное значение:

Код CSS
div {
outline: 2px double #000;
outline-offset: -5px;
}
<
×
>
Не публикуйте свой код прямо в комментариях. Во-первых, он плохо отображается. Во-вторых, он может содержать для кого-то «спойлеры», т.е. ответы на практику. Воспользуйтесь специальными сервисами: cssdeck.com или jsfiddle.net.
Комментарии, содержащие код (пару строк не считается), будут безжалостно удаляться.