html.okpython.net
HTML и CSS для начинающих

CSS :: Свойство outline-width

css-свойство outline-width (от англ. outline widthширина контура) используется для установки ширины контура элемента.

Следует помнить, что в отличие от границ элемента, контур не влияет на размеры и положение самого элемента, а также окружающих элементов, отображаясь поверх них.

Характеристики

  • Значение по умолчанию: medium.
  • Применяется: ко всем элементам.
  • Наследуется: нет.
  • Анимируется: да.
  • JavaScript: object.style.outlineWidth="value".

Синтаксис

outline-width: [<ширина> | thin | medium | thick]

Значения

  • ширина – принимаются любые единицы измерения (смотреть), используемые в CSS. Проценты использовать не разрешается.
  • thin – устанавливает для элемента тонкий контур.
  • medium – устанавливает для элемента средний контур.
  • thick – устанавливает для элемента толстый контур.

Ссылки

Примеры

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