Теория урока

151. Свойство 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;
}

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

Похожие уроки и записи блога