outline-width
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.
CSS-свойство outline-width
задаёт толщину обводки элемента. Обводка — линия вокруг элемента за пределами рамки (border
).
Интерактивный пример
При определении внешнего вида обводки зачастую удобнее всего воспользоваться сокращённым свойством outline
.
Синтаксис
/* Ключевые слова */
outline-width: thin;
outline-width: medium;
outline-width: thick;
/* Значения типа <length> */
outline-width: 1px;
outline-width: 0.1em;
/* Глобальные значения */
outline-width: inherit;
outline-width: initial;
outline-width: revert;
outline-width: revert-layer;
outline-width: unset;
Свойство outline-width
может быть иметь одно из перечисленных ниже значений.
Values
<length>
-
Толщина обводки, указанная в значениях типа
<length>
. thin
-
Зависит от реализации. Как правило, соответствует
1px
в десктопных браузерах (включая Firefox). medium
-
Зависит от реализации. Как правило, соответствует
3px
в десктопных браузерах (включая Firefox). thick
-
Зависит от реализации. Как правило, соответствует
5px
в десктопных браузерах (включая Firefox).
Формальное определение
Начальное значение | medium |
---|---|
Применяется к | все элементы |
Наследуется | нет |
Обработка значения | абсолютная длина; если указано ключевое слово none , вычисленное значение - 0 |
Animation type | длина |
Формальный синтаксис
outline-width =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
Примеры
Демонстрация обводки разных размеров толщины
HTML
<span id="thin">thin</span>
<span id="medium">medium</span>
<span id="thick">thick</span>
<span id="twopixels">2px</span>
<span id="oneex">1ex</span>
<span id="em">1.2em</span>
CSS
span {
outline-style: solid;
display: inline-block;
margin: 20px;
}
#thin {
outline-width: thin;
}
#medium {
outline-width: medium;
}
#thick {
outline-width: thick;
}
#twopixels {
outline-width: 2px;
}
#oneex {
outline-width: 1ex;
}
#em {
outline-width: 1.2em;
}
Результат
Спецификации
Specification |
---|
CSS Basic User Interface Module Level 4 # outline-width |
Совместимость с браузерами
BCD tables only load in the browser