CSS свойство outline-offsetcss3

CSS свойства

Определение и применение

CSS свойство outline-offset добавляет пространство между контуром и краем элемента или его границы (при наличии).

Контур не является частью элемента и не влияет на его ширину - свойства элемента width и height не содержат ширину контура.

Поддержка браузерами

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
outline-offsetcss34.03.510.53.1НетНет

CSS синтаксис:

outline-offset:"length | initial | inherit";

JavaScript синтаксис:

object.style.outlineOffset = "5px"

Значения свойства

ЗначениеОписание
lengthУстанавливает пространство между контуром и краем элемента или его границы (при наличии). Значение по умолчанию 0.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример работы с контуром в CSS</title>
<style> 
div {
outline : solid medium orange; /* устанавливаем контур средней ширины, тип контура - сплошной, оранжевого цвета */
width : 50px; /* устанавливаем ширину блока */
height : 50px; /* устанавливаем высоту блока */
background-color : Plum; /* устанавливает цвет заднего фона */
border : 2px solid black; /* устанавливает сплошную границу размером 2px черного цвета */
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
margin : 50px; /* устанавливаем величину отступа от каждого края элемента в одном объявлении */
}
.test   {outline-offset : 5px;}  /* устанавливаем пространство между контуром и границей элемента */
.test2 {outline-offset : 15px;}  /* устанавливаем пространство между контуром и границей элемента */
.test3 {outline-offset : 2em;}  /* устанавливаем пространство между контуром и границей элемента */
</style>
</head>
	<body>
		<div class = "test">5px</div>
		<div class = "test2">15px</div>
		<div class = "test3">2em</div>
	</body>
</html>
Пример работы со свойством CSS outline-offset (пространство между элементом и контуром).
Пример работы со свойством CSS outline-offset (пространство между элементом и контуром).

Свойство outline-offsetcss3 не поддерживается браузерами Internet Explorer и Edge

CSS свойства