html.okpython.net
Основы создания сайтов
CSS :: Свойство outline-width
css-свойство outline-width (от англ. outline width – ширина контура) используется для установки ширины контура элемента.
Следует помнить, что в отличие от границ элемента, контур не влияет на размеры и положение самого элемента, а также окружающих элементов, отображаясь поверх них.
Характеристики
- Значение по умолчанию: medium.
- Применяется: ко всем элементам.
- Наследуется: нет.
- Анимируется: да.
- JavaScript: object.style.outlineWidth="value".
Синтаксис
outline-width: [<ширина> | thin | medium | thick]
Значения
- ширина – принимаются любые единицы измерения (смотреть), используемые в CSS. Проценты использовать не разрешается.
- thin – устанавливает для элемента тонкий контур.
- medium – устанавливает для элемента средний контур.
- thick – устанавливает для элемента толстый контур.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css-ui-3/#outline-width
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/outline-width
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> p{ width: 300px; height: 50px; margin: 4em; padding: 1em; border: 5px solid violet; outline: groove orange; outline-offset: 0.5em; } .p_1{outline-width: thin;} .p_2{outline-width: medium;} .p_3{outline-width: thick;} .p_4{outline-width: 1em;} </style> </head> <body> <p class="p_1">outline-width: thin;</p> <p class="p_2">outline-width: medium;</p> <p class="p_3">outline-width: thick;</p> <p class="p_4">outline-width: 1em;</p> </body> </html>
Пример №1