outline offset css что это

Свойство outline-offset

Дата публикации: 2017-05-25

outline offset css что это. Смотреть фото outline offset css что это. Смотреть картинку outline offset css что это. Картинка про outline offset css что это. Фото outline offset css что это

От автора: свойство outline-offset в CSS сдвигает внешнюю обводку с края рамки элемента на указанную величину. Обводка (не рамка) не занимает места на странице (как абсолютно позиционированные элементы), поэтому ее можно сдвинуть на любое значение, и она никак не повлияет на положение или раскладку окружающих элементов.

Обводка задается через свойство outline и часто используется для создания кольца фокусировки для доступности. Свойство outline-offset позволяет изменять положение кольца фокусировки.

Значения

Свойство outline-offset принимает один тип значений, длину:

outline offset css что это. Смотреть фото outline offset css что это. Смотреть картинку outline offset css что это. Картинка про outline offset css что это. Фото outline offset css что это

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на 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.

outline offset css что это. Смотреть фото outline offset css что это. Смотреть картинку outline offset css что это. Картинка про outline offset css что это. Фото outline offset css что это

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Источник

CSS Outline Offset

CSS Outline Offset

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

В следующем примере указывается контур на 15 пикселей за пределами границы:

Этот параграф имеет контур 15 пикселей за пределами границы.

Пример

В следующем примере показано, что пространство между элементом и его контуром прозрачное:

Контур этого параграфа составляет 15 пикселей за пределами границы.

Пример

Проверьте себя с помощью упражнений!

Все CSS свойства контура

СвойствоОписание
outlineСокращенное свойство для установки ширины контура, стиля контура и цвета контура в одном объявлении.
outline-colorУстанавливает цвет контура
outline-offsetЗадает расстояние между контуром и краем или границей элемента.
outline-styleУстанавливает стиль контура
outline-widthУстанавливает ширину контура

ПАЛИТРА ЦВЕТОВ

outline offset css что это. Смотреть фото outline offset css что это. Смотреть картинку outline offset css что это. Картинка про outline offset css что это. Фото outline offset css что это

ПРИСОЕДИНЯЙТЕСЬ!

Получите ваш
Сертификат сегодня!

Связь с админом

Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на 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 ). Свойства срабатывают и при отсутствии границ, в этом случае происходит скругление фона элемента.

outline offset css что это. Смотреть фото outline offset css что это. Смотреть картинку outline offset css что это. Картинка про outline offset css что это. Фото outline offset css что это

Рис. №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 ), где:

Пример №11. Использование свойства box-shadow

Для указания числовых значений параметров свойства box-shadow разрешается использовать все доступные в CSS единицы измерения, а для указания цвета использовать все доступные в CSS цветовые модели.

Источник

2.15. CSS3 UI

outline offset css что это. Смотреть фото outline offset css что это. Смотреть картинку outline offset css что это. Картинка про outline offset css что это. Фото outline offset css что это

Спецификация CSS3 UI описывает свойства и значения, связанные с пользовательским интерфейсом.

Свойства для стилизации элементов взаимодействия с пользователем

1. Свойства внешнего контура

Контуры позволяют выделять активные элементы интерфейса, такие как, кнопки, поля формы, карты изображений и т.п.

Контур всегда находится сверху и не влияет на положение или размер блока или любых других блоков. Поэтому отображение или скрытие контуров не вызывает перекомпоновку.

Части контура не обязательно должны быть прямоугольными, например, он повторяет закругленные углы элемента.

1.1. Краткая запись внешнего контура: свойство outline

Свойство не наследуется.

1.2. Толщина внешнего контура: свойство outline-width

Свойство не наследуется.

1.3. Узор внешнего контура: свойство outline-style

Свойство не наследуется.

inheritНаследует значение свойства от родительского элемента.initialУстанавливает значение свойства в значение по умолчанию.

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.

Desktop

Mobile / Tablet

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *