outline

Универсальное свойство, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырёх сторонах элемента. В отличие от линии, задаваемой через border, у свойства outline есть следующие особенности:

  • outline не влияет на размеры и положение самого элемента;
  • outline не занимает место, не влияет на окружающие элементы и отображается поверх них;
  • нельзя задать параметры линии на отдельных сторонах элемента, outline применяется сразу ко всем четырём сторонам;
  • свойство border-radius не действует.

Краткая информация

Значение по умолчаниюНет
НаследуетсяНет
ПрименяетсяКо всем элементам
АнимируетсяДа

Синтаксис

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

outline-color
Задаёт цвет линии в любом допустимом для CSS формате.
outline-style
Стиль линии.
outline-width
Толщина границы.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>outline</title> <style> .photo img { padding: 20px; /* Поля вокруг изображения */ margin-right: 10px; /* Отступ справа */ margin-bottom: 10px; /* Отступ снизу */ outline: 1px solid #666; /* Параметры рамки */ background: #f0f0f0; /* Цвет фона */ float: left; /* Обтекание по правому краю */ } </style> </head> <body> <div class="photo"> <img src="image/girl.jpg" alt="Девочка с муфтой"> <img src="image/owl.jpg" alt="Сова"> <img src="image/boy.jpg" alt="Эвенкийский мальчик"> </div> </body> </html>

Результат данного примера показан на рис. 1.

Использование свойства outline

Рис. 1. Использование свойства outline

Объектная модель

Объект.style.outline

Спецификация

СпецификацияСтатус
CSS Basic User Interface Module Level 4Рабочий проект
CSS Basic User Interface Module Level 3Рекомендация
CSS Level 2 Revision 1 (CSS 2.1)Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

812171.21.5
1163.1

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 01.03.2019
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты