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

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

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

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

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

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

Синтаксис

outline-color: invert | <цвет>

Значения

  • invert – цвет контура задается браузером автоматически с максимальным контрастом по отношению к окружающему фону. При этом браузер может игнорировать данное значение, использовав при необходимости текущее значение свойства color для данного элемента.
  • цвет – любое допустимое в CSS значение цвета.

Ссылки

Примеры

HTML Результат htmlCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>

		p{
		width: 300px;
		height: 150px;
		margin: 5em;
		padding: 1em;
		border: 5px solid violet;
		outline: groove 8px;
		outline-offset: 1em;
		}
		
		.p_1{
		outline-color: #00FF00;
		}
		
		.p_2{
		outline-color: orange;
		}
		
		.p_3{
		outline-color: invert;		
		}		
		
	</style>
	
</head>
<body>
	 
	<p class="p_1">
		outline-color: #00FF00;
	</p> 
 
	<p class="p_2">
		outline-color: orange;
	</p>
 
	<p class="p_3">
		outline-color: invert;
	</p>
	
</body>
</html>	

Пример №1