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 июль 2015 г..
CSS-свойство outline-width задаёт толщину обводки элемента. Обводка — линия вокруг элемента за пределами рамки (border).
Интерактивный пример
outline-width: 12px; outline-width: thin; outline-width: medium; outline-width: thick; <section class="default-example" id="default-example"> <div class="transition-all" id="example-element"> This is a box with an outline around it. </div> </section> #example-element { outline: 0.75em solid; padding: 0.75em; width: 80%; height: 100px; } При определении внешнего вида обводки зачастую удобнее всего воспользоваться сокращённым свойством 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 |