Outline offset css что это

outline — offset

Свойство outline — offset устанавливает расстояние между фактическим краем элемента и внутренним краем обводки, заданной при помощи outline .

Пример

Скопировать ссылку «Пример» Скопировано

 div  outline: 3px dotted #333; outline-offset: -5px;> div  outline: 3px dotted #333; outline-offset: -5px; >

Как пишется

Скопировать ссылку «Как пишется» Скопировано

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

Если свойство outline — offset не прописано или ему задано значение 0 , то обводка будет располагаться вплотную к рамке (свойство border ) или границе элемента.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Расстояние между границей элемента или его рамкой и обводкой прозрачное. Нет возможности его закрасить.

Свойство outline-offset

Можно сделать такой интересный эффект (обратите внимание на толщину белого промежутка между границами, он 10px , а не 14 , так как часть съел outline своей толщиной в 4px ):

Смотрите также

свойство outline-width ,
которое задает толщину рамки
свойство outline-style ,
которое задает стиль рамки
свойство outline-color ,
которое задает цвет рамки
свойство outline ,
которое является свойством сокращением для рамок

outline-offset

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

Синтаксис

Значения

<размер>Задаёт расстояние от края элемента до рамки. Отрицательное значение отображает рамку внутри элемента, положительное — вокруг элемента. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

    outline-offset

Результат данного примера показан на рис. 1.

Использование свойства outline-offset

Рис. 1. Использование свойства outline-offset

Объектная модель

[window.]document.getElementById(» elementID «).style.outlineOffset

outline-offset¶

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

Демо¶

Синтаксис¶

1 2 3 4 5 6 7 8

/* values */ outline-offset: 3px; outline-offset: 0.2em; /* Global values */ outline-offset: inherit; outline-offset: initial; outline-offset: unset;

Значения¶

Задаёт расстояние от края элемента до рамки. Отрицательное значение отображает рамку внутри элемента, положительное — вокруг элемента.

Значение по-умолчанию: 0

Применяется ко всем элементам

Спецификации¶

CSS Transitions
CSS Basic User Interface Module Level 3

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

Can I Use outline? Data on support for the outline feature across the major browsers from caniuse.com.

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

 html> head> meta charset="utf-8" /> title>outline-offsettitle> style> .clue  background: url(/example/image/leather.jpg); /* Фоновый рисунок */ outline: 2px dashed rgba(255, 255, 255, 0.8); /* Пунктирная рамка */ outline-offset: -10px; /* Выводим рамку внутри элемента */ padding: 10px; /* Поля */ min-height: 100px; /* Минимальная высота */ > style> head> body> div class="clue">div> body> html>