Урок с практикой по 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;
}
<
×
>
Внимание! Впервые на этом сайте?

Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Вы можете начать изучение прямо сейчас, кликнув на ссылки: HTML, CSS, JavaScript, C++, PHP, jQuery, Python, Bootstrap 3

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно