Контур

Контур (Outline) предназначен для того, чтобы помочь посетителям сайта ориентироваться на нем, когда они переходят по интерактивным элементам с помощью клавиатуры. Контур, который появляется вокруг элемента, дает понять посетителю, что он взаимодействует с конкретным интерактивным элементом. Если посетитель сайта нажмет Tab на клавиатуре, контур появится вокруг следующего элемента, получившего фокус.

Добавление контура

Чтобы добавить контур элементу:

Выберите элемент, для которого хотите добавить контур (это должен быть интерактивный элемент, например, поле формы или кнопка).

Выберите для элемента состояние В фокусе (Focus) на вкладке стилей правой панели в разделе Источники стилей.

Найдите на вкладке Стилей правой панели раздел Внешний вид и параметр Контур (Outline) и нажмите +.

Установите параметры контура.

Контур виден только с отключенными направляющими (Shift+O).

Параметры контура

Цвет — определяет цвет контура и его прозрачность.

Толщина — определяет толщину контура. По умолчанию устанавливается в пикселях (px), можно изменить единицу измерения.

Смещение — определяет расстояние между границей элемента и контуром. По умолчанию устанавливается в пикселях (px), можно изменить единицу измерения.

Стиль обводки — определяет тип контура.

Точечная (Dotted)

Пунктирная (Dashed)

Сплошная (Solid)

Двойная (Double)

Вдавленная посередине (Groove)

Выпуклая посередине (Ridge)

Вдавленная (Inset)

Выпуклая (Outset)

Пример настройки контура:

Для поля формы (элемент Input) в состоянии В фокусе добавлен контур со следующими настройками: Толщина: 1px, Смещение: 1px, Стиль обводки: Сплошная.

Проверим: на предварительном просмотре или на опубликованном сайте поле формы приобретает синюю обводку, когда оно находится в фокусе — активно для ввода.