Что такое outline в css
CSS Outline
Структура CSS
Контур представляет собой линию, которая рисуется вокруг элементов, за пределами границ, чтобы сделать элемент «выделиться».
CSS имеет следующие свойства структуры:
Примечание: Контур отличается от границ! В отличие от границы, контур рисуется за пределами границы элемента и может перекрывать другое содержимое. Кроме того, контур не является частью размеров элемента; Общая ширина и высота элемента не зависит от ширины контура.
Стиль контура
Свойство outline-style задает стиль структуры и может иметь одно из следующих значений:
В следующем примере показаны различные значения outline-style :
A groove outline. The effect depends on the outline-color value.
A ridge outline. The effect depends on the outline-color value.
An inset outline. The effect depends on the outline-color value.
An outset outline. The effect depends on the outline-color value.
Пример
Цвет контура
Свойство outline-color используется для задания цвета контура.
Цвет может быть установлен:
В следующем примере показаны некоторые различные контуры с различными цветами. Также обратите внимание, что эти элементы также имеют тонкие черные границы внутри контура:
Сплошной красный контур.
Двойной зеленый контур.
Вначале желтый контур.
Пример
p.ex1 <
border: 1px solid black;
outline-style: solid;
outline-color: red;
>
p.ex2 <
border: 1px solid black;
outline-style: double;
outline-color: green;
>
p.ex3 <
border: 1px solid black;
outline-style: outset;
outline-color: yellow;
>
Сплошной инвертированный контур.
Пример
Ширина контура
Свойство outline-width задает ширину структуры и может иметь одно из следующих значений:
В следующем примере показаны некоторые очертания с различной шириной:
A 4px thick outline.
Пример
p.ex1 <
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thin;
>
p.ex2 <
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: medium;
>
p.ex3 <
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thick;
>
p.ex4 <
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: 4px;
>
Структура-Сокращенное свойство
Свойство outline является сокращенным свойством для задания следующих отдельных свойств структуры:
Свойство outline задается как одно, два или три значения из приведенного выше списка. Порядок значений не имеет значения.
В следующем примере показаны некоторые контуры, заданные с помощью сокращенного свойства outline :
A dotted red outline.
A 5px solid yellow outline.
A thick ridge pink outline.
Пример
Смещение контура
Свойство outline-offset добавляет пространство между контуром и краем/границей элемента. Пространство между элементом и его контуром прозрачно.
В следующем примере указывается структура 15пкс за пределами границы:
Этот абзац имеет контур 15пкс за пределами края границы.
Пример
В следующем примере показано, что пространство между элементом и его контуром прозрачно:
Этот абзац имеет контур 15пкс за пределами края границы.
outline
Время чтения: меньше 5 мин
Обновлено 20 декабря 2021
Кратко
Что-то вроде border на стероидах. Не влияет на размеры элемента, можно отодвинуть от границ на любое расстояние.
Присутствует в стандартных стилях браузера для акцента на сфокусированных интерактивных элементах. Типа размеры не меняются, вёрстка страницы не ломается, но пользователь наглядно видит, какой элемент в фокусе. Ситуация win-win!
Естественно, можно задавать это свойство любому элементу и без всяких фокусов 😏
Пример
Как пишется
Разберём доступные значения для каждого из свойств, а потом соберём всё в одну коробку:
outline-width
outline-style
Дальше создателей спецификации понесло в творчество и они придумали несколько фигурных обводок. Освещение таких рамок идёт сверху под прямым углом. И на это никак не повлиять:
Проще всего понять на примерах:
outline-color
Собираем все значения в шорткат.
Указано одно обязательное значение для outline-style :
outline-color | outline-style | outline-width :
Как можно понять из примера выше, для свойства outline можно задать только одно значение, указывающее на стиль обводки. Без него обводка не будет отображаться. Если задано только одно значение, то цвет будет совпадать с цветом текста (подражание ключевому слову currentColor ), а размер будет соответствовать ключевому слову medium (что, в свою очередь, равно 3 пикселям).
Заодно посмотрим на доступные значения для outline-offset :
Подсказки
💡 В отличие от border обводка всегда квадратная (прямоугольная), её углы нельзя скруглить. На сентябрь 2021 года обводка подстраивается под форму обводимого элемента! 🥳 Во всех актуальных версиях браузеров, кроме Safari 😤
💡 Обводка без зазрения совести накладывается на рядом стоящие элементы, не замечая их.
💡 Если задать обводку для многострочного текста, то каждая строка будет обведена своим прямоугольником. Лучше уж задать обводку для родителя.
На практике
Алёна Батицкая
🛠 Если вам не нравится обводка у элементов при фокусе, то не сбрасывайте её совсем, а попросите дизайнера или придумайте более уместный для вашего сайта стиль.
🛠 При помощи сочетания border и outline можно создать множественную рамку вокруг элемента.
Руководство по свойству outline в CSS
CSS-свойство outline позволяет вам определить область контура вокруг элемента.
Контур — это линия, которая рисуется сразу за границей элемента. Контуры обычно используются для обозначения фокуса или активного состояния таких элементов как кнопки, ссылки, поля формы и т. д.
В этом разделе мы разберем, как установить стиль, цвет и ширину контура.
Как разница между Outlines и Borders
Контур ( outline ) выглядит очень похожим на границу ( border ), но имеет отличительные особенности:
Если вы наметите контур на элементе, он займет столько же места на веб-страницах, как если бы у вас не было на нем контура. Контур перекрывает поля margins (прозрачная область за пределами границы) и окружающие элементы.
Стилизация Outline
Давайте попробуем следующий пример и посмотрим, как это работает:
Свойство outline-width
Свойство outline-width определяет ширину контура, добавляемого в элемент.
Посмотрим следующий пример, чтобы понять, как это на самом деле работает:
Свойство outline-color
Свойство outline-color устанавливает цвет контура элемента.
Следующие правила добавляют сплошной контур синего цвета вокруг абзацев.
Сокращенное свойство outline
Давайте посмотрим на следующий пример, чтобы понять, как он работает:
Если значение для отдельного свойства outline пропущено или не указано, вместо него будет использоваться значение по умолчанию для этого свойства, если оно есть.
Например, если значение для свойства outline-color отсутствует или не указано при установке контуров, свойство color элемента будет использоваться в качестве значения для контура элемента.
В следующем примере контур будет представлять собой сплошную зеленую линию шириной 5 пикселей:
Удаление контура outline у активных ссылок
Свойство outline используется для удаления контура вокруг активных ссылок.
Однако, рекомендуется применять некоторый альтернативный стиль, чтобы указать, что ссылка имеет фокус, т.к. на мобильных устройствах удобнее показывать какой элемент нажался.
Следующий пример показывает, как убрать контур у ссылок
Насколько публикация полезна?
Нажмите на звезду, чтобы оценить!
Средняя оценка 5 / 5. Количество оценок: 1
Оценок пока нет. Поставьте оценку первым.
Похожие посты
Руководство по свойству opacity в CSS
Руководство по таблицам в CSS
Руководство по свойству margin в 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 | CSS
Генератор outline CSS
Свойство outline (w3.org) — контур (не путать с контуром букв text-shadow). Очень похож на border.
? положительное число в любых единицах измерениях, но не в процентах
? положительное или отрицательное число в любых единицах измерениях, но не в процентах
Особенности outline
Ⅰ. outline не увеличивает коробку элемента
. наведите на outline.
Ⅱ. при переносе строк
получается такой вот контур
интереснее всего выглядящий в IE
Ⅲ. если у дочернего блока (потомка) position: static; или z-index ниже либо равен значению родителя, то outline родителя перекрывает его:
Ⅳ. outline ложиться и поверх нижестоящего/вышестоящего в коде элемента. Искл. при работе со свойством position и с overflow родителя.
Примеры
Как убрать обводку/рамку с input, textarea, ссылки a
У некоторых тегов HTML outline присутствует по умолчанию.
Нажмите на эту ссылку и вернитесь обратно. Она в Firefox приобрела такой вид. Очень удобно. Для того, чтобы удалить обводку
При фокусе на input остальное пространство темнеет, становится менее выражено
CSS полупрозрачная рамка вокруг картинки
Самый простой способ на края изображения наложить полупрозрачный фон 