Свойство CSS outline-width
Свойство outline-width определяет ширину outline. Outline — это линия, которая рисуется вокруг элемента. Однако она отличается от свойства border.
Свойства width и height элемента не включают ширину outline, поскольку outline не считается частью размеров элемента.
Это свойство принимает следующие значения: medium, thin, thick, length, initial, inherit, revert и unset.
INFO
Перед установкой outline-width необходимо задать для свойства outline-style значение, отличное от none, чтобы ширина была видна.
| Начальное значение | medium |
|---|---|
| Применяется ко | Всем элементам. |
| Наследуется | Нет. |
| Анимируется | Да. Ширина outline анимируется. |
| Версия | CSS2 |
| Синтаксис DOM | 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 второго элемента находится за пределами его рамки.
Outline с рамкой
Ещё один пример кода 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>Базовый пример outline
Пример свойства 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 | Определяет medium outline. Это значение по умолчанию для данного свойства. | Запустить » |
| thin | Определяет тонкий outline. | Запустить » |
| thick | Определяет толстый outline. | Запустить » |
| length | Определяет толщину outline. | Запустить » |
| initial | Устанавливает свойство в значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. | |
| revert | Возвращает свойство к значению, установленному агентом пользователя или предыдущим каскадом. | |
| unset | Сбрасывает свойство к унаследованному или начальному значению в зависимости от наследования. |
Практика
Какие возможные значения имеет свойство 'outline-width' в CSS?