CSS-свойство outline-width
Свойство CSS outline-width задаёт ширину обводки элемента. Описание значений и примеры использования.
Свойство outline-width определяет толщину обводки — линии, которая рисуется снаружи рамки элемента. Оно работает аналогично border-width, но с одним важным отличием: обводка не занимает места в блочной модели, поэтому изменение outline-width никогда не сдвигает соседние элементы.
Поскольку обводка находится за пределами рамки и не входит в блок, ширина и высота элемента не включают обводку. Именно поэтому обводка — это стандартный способ браузера отображать фокус клавиатуры: кольцо фокуса может появляться и исчезать, не смещая содержимое страницы.
Свойство принимает следующие значения: medium, thin, thick, <length>, initial, inherit, revert и unset.
Когда использовать outline-width
- Индикаторы фокуса. При настройке кольца фокуса с помощью псевдоклассов
:focusили:focus-visibleсвойствоoutline-widthуправляет его заметностью. Видимая обводка фокуса важна для доступности — никогда не устанавливайте её в0и не убирайте обводку без предоставления другого визуального индикатора фокуса. - Выделение без перестановки элементов. Поскольку обводка находится за пределами блока, более толстая обводка при наведении или фокусе не будет смещать соседние элементы, как это делала бы более толстая рамка.
- Отладка разметки. Быстрый
outline: 1px solid red— популярный способ визуализировать блоки элементов без изменения их размеров.
outline-width вступает в силу только после того, как для outline-style задано значение, отличное от none (по умолчанию). Если стиль равен none, обводка не имеет ширины независимо от установленного здесь значения. Сокращённое свойство outline задаёт ширину, стиль и outline-color одновременно.
Три ключевых слова соответствуют толщинам, определённым браузером, а не фиксированным значениям в пикселях, поэтому они могут немного отличаться между браузерами. На практике thin — приблизительно 1px, medium (значение по умолчанию) — приблизительно 3px, а thick — приблизительно 5px. Когда нужно точное, предсказуемое значение, используйте <length>, например 2px или 0.2em.
Обратите внимание, что outline-width не принимает проценты или отрицательные значения.
| Начальное значение | medium |
|---|---|
| Применяется к | Всем элементам. |
| Наследуется | Нет. |
| Анимируется | Да. Ширина обводки поддерживает анимацию. |
| Версия | CSS2 |
| DOM Syntax | Object.style.outlineWidth = "thick"; |
Синтаксис
Синтаксис CSS outline-width
outline-width: medium | thin | thick | length | initial | inherit | revert | unset;Пример с несколькими значениями
Пример кода CSS outline-width
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.p1 {
outline-style: solid;
outline-width: 5px;
}
.p2 {
outline-style: solid;
outline-width: 0.4em;
}
.p3 {
outline-style: solid;
outline-width: thin;
}
.p4 {
outline-style: solid;
outline-width: medium;
}
.p5 {
outline-style: solid;
outline-width: thick;
}
.p6 {
outline-style: solid;
outline-width: 0.1cm;
}
.p7 {
outline-style: solid;
outline-width: 1mm;
}
</style>
</head>
<body>
<h2>Outline-width property example</h2>
<p class="p1">This is a paragraph with outline set to 5px.</p>
<p class="p2">This is a paragraph with outline set to 0.4em.</p>
<p class="p3">This is a paragraph with outline set to thin.</p>
<p class="p4">This is a paragraph with outline set to medium.</p>
<p class="p5">This is a paragraph with outline set to thick.</p>
<p class="p6">This is a paragraph with outline set to 0.1cm.</p>
<p class="p7">This is a paragraph with outline set to 1 mm.</p>
</body>
</html>Результат
В следующем примере у первого элемента нет рамки, у второго — есть. Обратите внимание, что обводка второго элемента рисуется снаружи его рамки, с зазором, который можно увеличить с помощью outline-offset.
Обводка с рамкой
Ещё один пример кода CSS outline-width
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.ex1 {
outline-style: solid;
outline-width: thick;
}
div.ex2 {
border: 2px solid #1c87c9;
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>Базовый пример обводки
Пример свойства CSS outline-width
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 2px solid #1c87c9;
outline-style: dotted;
outline-width: 3px;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<div>Lorem Ipsum is simply dummy text of the printing...</div>
</body>
</html>Совместное использование outline-width и outline-style
Пример свойства CSS outline-width со свойством outline-style
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 2px solid #1c87c9;
outline-style: dashed;
outline-width: thick;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<div>Lorem Ipsum is simply dummy text of the printing...</div>
</body>
</html>Значения
| Значение | Описание | Попробовать |
|---|---|---|
| medium | Задаёт среднюю обводку. Это значение по умолчанию. | Попробовать » |
| thin | Задаёт тонкую обводку. | Попробовать » |
| thick | Задаёт толстую обводку. | Попробовать » |
| length | Задаёт толщину обводки. | Попробовать » |
| initial | Устанавливает свойство в значение по умолчанию. | Попробовать » |
| inherit | Наследует свойство от родительского элемента. | |
| revert | Возвращает свойство к значению, установленному пользовательским агентом или предыдущим каскадом. | |
| unset | Сбрасывает свойство до унаследованного или начального значения в зависимости от наследования. |
Связанные свойства
- outline — сокращение для ширины, стиля и цвета в одном объявлении.
- outline-style — обязательно для видимости ширины.
- outline-color — задаёт цвет обводки.
- outline-offset — добавляет отступ между обводкой и рамкой элемента.
- border-width — аналог в блочной модели, который влияет на разметку.