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

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

div {
    outline: width style color;
}

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

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

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

div {
    outline: 2px solid #000;
}

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

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

div {
    outline: 2px double #000;
    outline-offset: -5px;
}

Похожие уроки Codebra

1. При помощи свойства outline-offset отодвиньте границу на 5px.

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.