outline offset css что это
Свойство outline-offset
Дата публикации: 2017-05-25
От автора: свойство outline-offset в CSS сдвигает внешнюю обводку с края рамки элемента на указанную величину. Обводка (не рамка) не занимает места на странице (как абсолютно позиционированные элементы), поэтому ее можно сдвинуть на любое значение, и она никак не повлияет на положение или раскладку окружающих элементов.
Обводка задается через свойство outline и часто используется для создания кольца фокусировки для доступности. Свойство outline-offset позволяет изменять положение кольца фокусировки.
Значения
Свойство outline-offset принимает один тип значений, длину:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
любая другая валидная длина в заданных единицах измерения (в том числе отрицательные значения).
Обратите внимание, что outline-offset, как и outline-width, не принимает значения в процентах.
Позиционирование обводки
По умолчанию обводка элемента рисуется моментально вокруг рамки (или вокруг того места, где отрисовывается рамка, если рамка задана). Поэтому есть техническая возможность объединить обводку и рамку для создания эффекта двух рамок:
С помощью outline-offset можно изменить положение обводки относительно края рамки. Поиграйтесь с демо ниже, в нем можно интерактивно изменить сдвиг обводки с помощью слайдера. Значение сдвига отображается на странице по время сдвига слайдера:
Заметка: если открыть демо сверху в Firefox, то сначала обводка отобразится корректно, но когда вы начнете двигать слайдер, обводка начнет дергаться и займет неправильное положение. Скролинг элемента за пределы видимости и обратно вынуждает браузер перерисовывать обводку в неправильном месте. Баг замечен только в Firefox.
Не входит в сокращение outline
Как и свойство border, свойство outline является сокращением и представляет три свойства: outline-color, outline-style и outline-width.
Свойство outline-offset не используется в сокращениях, поэтому его необходимо объявлять отдельно от самой обводки.
Поддержка в браузерах
Данные взяты с Caniuse. За более подробной информацией перейдите на сайт. Цифра указывает на то, что свойство поддерживается в этой версии и выше.
Индикатор «partial» для IE означает, что IE не поддерживает outline-offset, но поддерживает сокращение outline и три его свойства.
Помимо упомянутого в разделе «позиционирование обводки» бага есть еще один баг в Firefox. Обводка неправильно рисуется, когда у элемента есть дочерний элемент, перекрывающий границы родителя (например, из-за отрицательных margin’ов или абсолютного позиционирования). Поэтому outline-offset будет относиться к расширенной границе, созданной дочерним элементом, а не родителем. Чтобы лучше понять, смотрите CodePen, эту ветку Stack Overflow и баг репорт (благодарим читателя Matt Vanes за отправку бага).
Автор: Louis Lazaris
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
CSS Outline Offset
CSS Outline Offset
Свойство outline-offset добавляет пространство между контуром и краем / границей элемента. Пространство между элементом и его контуром прозрачное.
В следующем примере указывается контур на 15 пикселей за пределами границы:
Этот параграф имеет контур 15 пикселей за пределами границы.
Пример
В следующем примере показано, что пространство между элементом и его контуром прозрачное:
Контур этого параграфа составляет 15 пикселей за пределами границы.
Пример
Проверьте себя с помощью упражнений!
Все CSS свойства контура
| Свойство | Описание |
|---|---|
| outline | Сокращенное свойство для установки ширины контура, стиля контура и цвета контура в одном объявлении. |
| outline-color | Устанавливает цвет контура |
| outline-offset | Задает расстояние между контуром и краем или границей элемента. |
| outline-style | Устанавливает стиль контура |
| outline-width | Устанавливает ширину контура |
ПАЛИТРА ЦВЕТОВ
ПРИСОЕДИНЯЙТЕСЬ!
Получите ваш
Сертификат сегодня!
Связь с админом
Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:
Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты
Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.
CSS :: Границы элементов
Стиль границ элемента,
css-свойство border-style и его производные
Для установки границ элементов CSS предоставляет целый набор свойств, позволяющих задать стиль, толщину и цвет границ как по отдельности для каждой из сторон элемента, так и для всех сторон одновременно. Свойств достаточно много, но описывать их все по отдельности мы не будем, т.к. они очень похожи по своему назначению и легко разбиваются на группы.
Для установки стиля границ используются следующие ненаследуемые свойства border-style, border-top-style, border-bottom-style, border-left-style, border-right-style (см. пример №1 ). Все они могут принимать ряд значений, которые определяют внешний вид границы:
Пример №1. Определение стиля границ элементов
Следует отметить, что свойство border-style может принимать через пробел два, три или даже четыре значения (см. пример №2 ):
Пример №2. Использование сокращенного свойства border-style
Ширина границ элемента,
css-свойство border-width и его производные
Для установки ширины границ используются похожие ненаследуемые свойства border-width, border-top-width, border-bottom-width, border-left-width, border-right-width (см. пример №3 ). Все они могут принимать ряд значений, которые определяют ширину границы:
Опять же, свойство border-width может принимать через пробел два, три или даже четыре значения:
Пример №3. Установка ширины границ элементов
Цвет границ элемента,
css-свойство border-color и его производные
Пример №4. Установка цвета границ элементов
Универсальные css-свойства border,
border-top, border-bottom, border-right и border-left
Имеется возможность задать все характеристики границы элемента одновременно при помощи универсальных ненаследуемых свойств border, border-top, border-bottom, border-left, border-right (см. пример №5 ). Стиль, ширину и цвет при этом нужно указывать через пробел, но в любом порядке.
Пример №5. Установка границ элементов
Скругление границ элемента,
css-свойство border-radius и его производные
Внешний вид границ элементов можно также изменять за счет величины скругления углов границ элементов. Делается это за счет использования ненаследуемых ствойств border-radius, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius. Все они принимают в качестве радиуса значения в любых доступных в CSS единицах измерения, а также процентах, отсчет которых производится относительно ширины блока. Также можно через слеш / задавать сразу два радиуса, если подразумевается сгругление по эллипсу (см. рисунок №6 и пример №7 ). Свойства срабатывают и при отсутствии границ, в этом случае происходит скругление фона элемента.
Рис. №6. Схема скругления углов рамки элемента
Пример №7. Установка радиусов границ элементов
Свойство border-radius, кроме того, может принимать через пробел два, три или даже четыре значения (см. пример №8 ):
Пример №8. Использование сокращенного свойства border-radius
Внешняя рамка элемента, css-свойства outline,
outline-style, outline-width и outline-color
Пример №9. Установка контура элементов
Расстояние между внешней и внутренней границами,
css-свойство outline-offset
Для внешних границ дополнительно определено еще одно полезное ненаследуемое свойство outline-offset, которое позволяет задавать расстояние между внешней и внутренней границами. В качестве значения свойство принимает величину расстояния в любых доступных единицах измерения CSS (см. пример №9 ). Кроме того, разрешается использовать и отрицательные значения, тогда рамка будет отображена внутри самого элемента.
Пример №10. Обнуление отступов элементов
Создание теней, css-свойство box-shadow
Вместо использования внешней рамки имеется возможность эффективного выделения элементов при помощи теней. Для этого применяется ненаследуемое свойство box-shadow, которое создает одну или несколько теней, значения которых тогда нужно перечислять через запятую. Формат записи свойства имеет вид
Пример №11. Использование свойства box-shadow
Для указания числовых значений параметров свойства box-shadow разрешается использовать все доступные в CSS единицы измерения, а для указания цвета использовать все доступные в CSS цветовые модели.
2.15. CSS3 UI
Спецификация CSS3 UI описывает свойства и значения, связанные с пользовательским интерфейсом.
Свойства для стилизации элементов взаимодействия с пользователем
1. Свойства внешнего контура
Контуры позволяют выделять активные элементы интерфейса, такие как, кнопки, поля формы, карты изображений и т.п.
Контур всегда находится сверху и не влияет на положение или размер блока или любых других блоков. Поэтому отображение или скрытие контуров не вызывает перекомпоновку.
Части контура не обязательно должны быть прямоугольными, например, он повторяет закругленные углы элемента.
1.1. Краткая запись внешнего контура: свойство outline
Свойство не наследуется.
1.2. Толщина внешнего контура: свойство outline-width
Свойство не наследуется.
1.3. Узор внешнего контура: свойство outline-style
Свойство не наследуется.
1.4. Цвет внешнего контура: свойство outline-color
Свойство не наследуется.
1.5. Смещение внешнего контура: свойство outline-offset
По умолчанию контур рисуется начиная с края рамки элемента. Свойство outline-offset позволяет сместить контур от края границы на указанную величину.
Свойство не наследуется.
2. Изменение размера блоков: свойство resize
Поддержка браузерами
Если для элемента установлено изменение размеров, в правом нижнем углу появляется треугольник, с помощью которого элемент можно растягивать в обеих направлениях. Уменьшение первоначальных размеров элемента не предусмотрено.
Свойство не наследуется.
| resize | |
|---|---|
| Значения: | |
| none | Браузер не предоставляет механизм изменения размера элемента пользователем. Значение по умолчанию. |
| both | Браузер представляет механизм двунаправленного изменения размера, позволяющий пользователю регулировать как высоту, так и ширину элемента. |
| horizontal | Браузер представляет однонаправленный горизонтальный механизм изменения размера, позволяющий пользователю регулировать только ширину элемента. |
| vertical | Браузер представляет однонаправленный вертикальный механизм изменения размера, позволяющий пользователю регулировать только высоту элемента. |
| inherit | Наследует свойство от родительского элемента. |
| initial | Устанавливает это свойство в значение по умолчанию. |
3. Стилизация курсора: свойство cursor
Поддержка браузерами
Свойство cursor указывает тип курсора, который будет отображаться для устройства, когда точка доступа курсора находится в пределах границ элемента. Браузеры могут игнорировать свойство над собственными элементами управления, например, полосами прокрутки. Браузеры также могут игнорировать свойство cursor и отображать его по своему выбору, чтобы указать различные состояния пользовательского интерфейса, например, когда страница не отвечает или когда пользователь выделяет текст.
Наведите над ячейками таблицы ниже, чтобы увидеть, как выглядит курсор для каждого установленного значения.
4. Цвет каретки вставки: свойство caret-color
Поддержка браузерами
Символ каретки является видимым индикатором точки вставки в элементе, в который пользователь вставляет текст (и, возможно, другой контент). Свойство caret-color контролирует цвет этого видимого индикатора.
outline-offset
Take your JavaScript to the next level at Frontend Masters.
The outline-offset property in CSS offsets a defined outline from an element’s border edge by a specified amount. An outline, which is different from a border, does not take up any space on the page (like an absolutely positioned element) so the outline can be offset in any amount and it will not affect the position or layout of surrounding elements.
Outlines defined using the outline property are often used as focus rings, for accessibility. Thus, the outline-offset property allows you to change the position of the focus ring.
outline-offset accepts one kind of value, a length, which can be:
Positioning of the Outline
By default an element’s outline is drawn immediately outside the border (or immediately outside where the border would be drawn if a border was defined). Therefore, it’s technically possible to combine outline and border for a two-border effect:
From there, outline-offset can be used to change the position of the outline relative to the border edge. Try the demo below which allows you to interactively change the outline’s offset value using the slider. The value of the offset is displayed on the page as you move the slider:
If you view the above demo in Firefox, you’ll notice the outline appears correct at first but when the slider is adjusted the outline doesn’t render smoothly and ends up in the wrong position. Scrolling the element out of view, then back into view, forces the browser to repaint the outline in the correct position. This seems to be a Firefox-only bug.
Not Part of outline Shorthand
The outline-offset property, therefore, is not represented in this or any other shorthand property, so it needs to be declared separately from the defined outline itself.
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.