CSS-свойство outline
Свойство CSS outline — это сокращение для outline-width, outline-style, outline-color. Смотрите значения и примеры.
Outline — это линия, нарисованная вокруг элемента, сразу за краем его рамки. В отличие от border, outline не занимает место в потоке документа и одинакова со всех четырёх сторон — задать её отдельно для каждой стороны невозможно. На этой странице рассматривается сокращённое свойство outline, его отличия от border и его роль в обеспечении доступности для клавиатурных пользователей.
Свойство outline является сокращением и задаёт следующие полные свойства одним объявлением:
- outline-width — толщина линии.
- outline-style — стиль линии (
solid,dashed,dotted, …). Обязателен для отображения outline. - outline-color — цвет линии.
- outline-offset — отступ между outline и краем рамки. (Задаётся отдельно; не входит в сокращение
outline.)
По умолчанию стиль outline равен none, поэтому одно лишь задание outline-color не даст эффекта — необходимо также указать стиль. Поскольку outline рисуется за пределами элемента и игнорируется блочной моделью, она никогда не сдвигает соседний контент и не изменяет размеры элемента в потоке.
Outline и border
Outline и border похожи внешне, но ведут себя по-разному:
- Поток документа: border является частью блочной модели и сдвигает соседний контент; outline рисуется поверх и не занимает пространства.
- Стороны: border можно стилизовать отдельно для каждой стороны (
border-top,border-left, …); outline всегда одинакова со всех четырёх сторон. - Форма: в большинстве браузеров outline строго прямоугольна и не скругляется под воздействием border-radius, даже если border скруглена.
- Положение: outline рисуется за пределами края border, поэтому при наличии обеих outline располагается снаружи border.
| Начальное значение | medium none currentcolor |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter. |
| Наследуется | Нет. |
| Анимируемо | Да. Outline элемента поддаётся анимации. |
| Версия | CSS2 |
| DOM-синтаксис | object.style.outline = "#eee dashed 10px"; |
Синтаксис
CSS outline
outline: outline-width | outline-style | outline-color | outline-offset | initial | inherit;Пример свойства outline:
Пример кода CSS outline
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.dotted {
outline: dotted;
}
p.dashed {
outline: dashed;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<p class="dotted">Lorem Ipsum is simply dummy text of the printing... </p>
<p class="dashed">Lorem Ipsum is simply dummy text of the printing...</p>
</body>
</html>Результат
В данном примере outline-style первого элемента — dotted, а второго — dashed.
В следующем примере у первого элемента нет border, у второго — есть. Обратите внимание, что outline второго элемента находится снаружи его border:
Пример свойства outline для элемента с border:
Пример кода CSS outline и border вместе
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.ex1 {
outline-style: solid;
outline-width: thick;
}
div.ex2 {
border: 1px solid #fc7f01;
outline-style: solid;
outline-width: thick;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<div class="ex1">Lorem Ipsum is simply dummy text of the printing...</div>
<br />
<div class="ex2">Lorem Ipsum is simply dummy text of the printing...</div>
</body>
</html>В следующем примере outline находится снаружи border второго элемента.
Пример свойства outline-color вместе с outline-style:
Пример кода CSS outline с цветом
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.blue {
outline-style: solid;
outline-color: #1c87c9;
}
div.green {
border: 1px solid black;
outline-style: solid;
outline-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<div class="blue">Lorem Ipsum is simply dummy text of the printing...</div>
<br />
<div class="green">Lorem Ipsum is simply dummy text of the printing...</div>
</body>
</html>Отступ outline с помощью outline-offset
По умолчанию outline вплотную прилегает к краю border. Свойство outline-offset отодвигает её (или, при отрицательном значении, вдвигает внутрь). Это отдельное свойство, не входящее в сокращение outline:
button {
outline: 2px solid #1c87c9;
outline-offset: 4px; /* 4px gap between the border and the outline */
}Outline и доступность с клавиатуры
Наиболее важное практическое применение outline — индикатор фокуса. Когда пользователь перемещается по странице с помощью клавиши Tab, браузер рисует outline по умолчанию вокруг сфокусированного элемента, чтобы было видно, где находится фокус. Удаление outline без замены — серьёзная проблема доступности:
/* Do NOT do this — keyboard users lose track of focus */
button:focus {
outline: none;
}Если стандартный focus ring не вписывается в дизайн, его следует переоформить, а не убирать:
button:focus-visible {
outline: 2px solid #1c87c9;
outline-offset: 2px;
}Здесь используется состояние :focus в сочетании с современным псевдоклассом :focus-visible, который показывает outline только при взаимодействии с клавиатурой — таким образом клики мышью не вызывают появления кольца, а клавиатурные пользователи всегда видят, где находится фокус.
Значения
| Значение | Описание |
|---|---|
| outline-width | Определяет ширину outline. |
| outline-style | Определяет стиль outline. |
| outline-color | Задаёт цвет outline. |
| outline-offset | Задаёт отступ outline от края border. |
| initial | Устанавливает для свойства значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Связанные свойства
- outline-style — обязательный компонент стиля в сокращении.
- outline-width — управляет толщиной outline.
- outline-color — управляет цветом outline.
- outline-offset — задаёт отступ outline от border.
- border — аналог в блочной модели, влияющий на поток документа.