Внимание! На этой странице вы найдете материал урока из архивного курса по CSS. Курс был написан в 2015 и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по CSS и на странице первого урока.
- При помощи свойства
outline-offsetотодвиньте границу на5px.
Свойство 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 по тегу CSS.
