Outline offset css что это

Свойство outline-offset

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

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

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

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> 

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

Что-то вроде border на стероидах. Не влияет на размеры элемента, можно отодвинуть от границ на любое расстояние.

Присутствует в стандартных стилях браузера для акцента на сфокусированных интерактивных элементах. Типа размеры не меняются, вёрстка страницы не ломается, но пользователь наглядно видит, какой элемент в фокусе. Ситуация win-win!

Естественно, можно задавать это свойство любому элементу и без всяких фокусов ��

Пример

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

Добавим элементу обводку, которая будет отодвинута от края на 10 пикселей. Для этого мы используем дополнительное свойство outline — offset . Оно идёт рука об руку с outline .

Зададим обводку шириной 5 пикселей зелёного цвета. Отодвинем её от края элемента на 10 пикселей. Рамку зададим для наглядности.

 .block  border: 1px solid black; outline: 5px solid green; outline-offset: 10px;> .block  border: 1px solid black; outline: 5px solid green; outline-offset: 10px; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

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

outline на самом деле шорткат — короткое свойство для записи сразу нескольких значений. Внутри себя оно содержит свойства outline — width , outline — style и outline — color .

Разберём доступные значения для каждого из свойств, а потом соберём всё в одну коробку:

outline — width

Скопировать ссылку «outline-width» Скопировано

• Ключевые слова thin , medium , thick — задают тонкую, среднюю или толстую ширину. Значения в пикселях на усмотрение браузера, но обычно соответствует 1, 3 и 6 пикселям соответственно.
• Конкретный размер — размер в любых единицах измерения, доступных в вебе. Например, 10px или 0 . 2em .

outline — style

Скопировать ссылку «outline-style» Скопировано

• none — обводка не отображается, даже если задано значение для outline — width .
• dotted — обводка будет состоять из точек. Круглых точек, вроде такого •••••
• dashed — обводка будет в виде пунктирной линии.
• solid — значение по умолчанию, если не задано иное. Сплошная линия.
• double — двойная сплошная линия.

Дальше создателей спецификации понесло в творчество и они придумали несколько фигурных обводок. Освещение таких рамок идёт сверху под прямым углом. И на это никак не повлиять:

• groove — обводка будет отображаться так, будто рамка объёмная, с вдавленной серединой и подсвечена. Цвет обводки (если он отличен от чёрного) станет двухцветным.
• ridge — обводка отобразится объёмной, её центр будет приподнят. Противоположно groove .
• inset — объёмная рамка, края направлены внутрь элемента.
• outset — объёмная рамка, края направлены наружу элемента, противоположно inset .

Проще всего понять на примерах:

outline — color

Скопировать ссылку «outline-color» Скопировано

• любое доступное значение цвета в вебе, включая ключевые слова transparent , current Color .
• invert — ключевое слово, устанавливающее противоположный цвету фона элемента цвет обводки. Удобно для достижения максимальной контрастности.

Собираем все значения в шорткат.

Указано одно обязательное значение для outline — style :

 .selector  outline: solid;> .selector  outline: solid; >    Скопировать Скопировано Не удалось скопировать   

outline — color | outline — style :

 .selector  outline: #f66 dashed;> .selector  outline: #f66 dashed; >    Скопировать Скопировано Не удалось скопировать   

outline — style | outline — width :

 .selector  outline: inset thick;> .selector  outline: inset thick; >    Скопировать Скопировано Не удалось скопировать   

outline — color | outline — style | outline — width :

 .selector  outline: green solid 3px;> .selector  outline: green solid 3px; >    Скопировать Скопировано Не удалось скопировать   

Как можно понять из примера выше, для свойства outline можно задать только одно значение, указывающее на стиль обводки. Без него обводка не будет отображаться. Если задано только одно значение, то цвет будет совпадать с цветом текста (подражание ключевому слову current Color ), а размер будет соответствовать ключевому слову medium (что, в свою очередь, равно 3 пикселям).

Заодно посмотрим на доступные значения для outline — offset :

• Может принимать в качестве значения любое указание размера в любых единицах измерения. Можно задать отрицательное значение и тогда обводка будет сдвинута внутрь. Тогда стоит учитывать ширину самой обводки, поскольку свойство outline — offset указывает расстояние от края элемента до внутреннего края обводки.

Подсказки

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

�� В отличие от border обводка всегда квадратная (прямоугольная), её углы нельзя скруглить. На сентябрь 2021 года обводка подстраивается под форму обводимого элемента! �� Во всех актуальных версиях браузеров, кроме Safari ��

�� Обводка без зазрения совести накладывается на рядом стоящие элементы, не замечая их.

�� Если задать обводку для многострочного текста, то каждая строка будет обведена своим прямоугольником. Лучше уж задать обводку для родителя.

На практике

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

Егор Левченко советует

Скопировать ссылку «Егор Левченко советует» Скопировано

��️ Если ваш дизайнер просит сбросить обводку у элементов в фокусе, не пользуйтесь outline : none , даже если это кажется самым простым способом.

Воспользуйтесь свойством outline — color со значением transparent .

Обводка в фокусе пропадёт, если пользователь не включил режим высокой контрастности. В контрастном режиме обводка будет на месте, а вот цвета и красивые дизайнерские тени — нет.

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� Если вам не нравится обводка у элементов при фокусе, то не сбрасывайте её совсем, а попросите дизайнера или придумайте более уместный для вашего сайта стиль.

�� При помощи сочетания border и outline можно создать множественную рамку вокруг элемента.