стиль 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
Разработка сайтов для бизнеса
Если у вас есть вопрос, на который вы не знаете ответ — напишите нам, мы поможем разобраться. Мы всегда рады интересным знакомствам и новым проектам.
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 | 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 полупрозрачная рамка вокруг картинки
Самый простой способ на края изображения наложить полупрозрачный фон 
Оформляйте стили наведения, фокуса и активного состояния по-разному
Вот пример кода, который всегда использовал.
Когда я стал уделять больше внимания доступности интерфейса при работе с клавиатуры (состоянию фокуса в частности), пришел к выводу, что мы не должны одинаково стилизовать разные состояния элементов.
Наведение, фокус и активное состояние должны стилизоваться по-разному.
Причина проста: Это разные состояния!
Сегодня я хочу продемонстрировать вам волшебный способ оформить все три состояния без особых усилий.
Стилизация наведения (:hover)
:hover срабатывает, когда пользователь наводит на элемент курсор мыши.
Стилизация фокуса (:focus)
:focus срабатывает, когда элемент получает фокус. Это достигается двумя способами:
Когда пользователи нажимают «Tab», они не знают, к какому элементу перейдет фокус, а могут лишь предполагать. Вот почему нам нужно заметное изменение состояния — чтобы привлечь внимание пользователя на сфокусированный элемент.
В большинстве случаев оформление фокуса по умолчанию вполне подходит. Если вы хотите стилизовать его по-своему, помните об этих четырёх моментах:
Стилизация активного состояния (:active)
При взаимодействии с чем-то в реальной жизни, вы ожидаете своего рода отклик. Например, при надавливании на кнопку, вы ожидаете, что она нажмётся.
Две особенности, которые следует принять к сведению:
Стили ссылок по умолчанию
Ссылки имеют стили активного состояния по умолчанию. При нажатии они становятся красными
Взаимосвязь между :active и :focus
При удержании левой кнопку мыши на фокусируемом элементе, вызывается его активное состояние. Но одновременно с этим вызывается и состояние фокуса.
Когда вы отпускаете левую кнопку мыши, фокус остаётся на элементе.
Это относится к большинству фокусируемых элементов, кроме ссылок и кнопок.
Добавление этого кода изменит поведение нажатия кнопок на следующее:
Теперь, когда вы знаете всё необходимое о состояниях hover, focus и active, я хочу поговорить о стилизации всех трёх
Волшебная комбинация
Волшебная комбинация позволяет пользователям получать отклик, когда они наводят, фокусируются или взаимодействуют с элементом. Вот код, который вам нужен:
Для пользователей мыши:
Для пользователей клавиатуры:
Лучшее из обоих миров!
Не волшебная (но может даже лучше) комбинация
Как я упомянул выше, клики на кнопки имеют странное поведение в Safari и Firefox на Mac OS. Если вы добавили фрагмент JavaScript-кода, который я предлагал выше, магическая комбинация всё еще работает. Но не идеально.
Вот что произойдёт в Safari и Firefox на Mac OS:
Если вы считаете, что этого достаточно, то волшебная комбинация работает. Можете на этом и остановиться.
Поведение кнопки в Safari, если были стилизованы все три состояния
Вот и всё! Благодарю за чтение и надеюсь, сегодня вы узнали что-то новое.
3 CSS метода для добавления границ элементов
В этой статье мы рассмотрим различия между:
Мы также обсудим, когда вы можете использовать одно вместо другого.
Обновление модели CSS Box
Ключевое различие между нашими тремя методами границы заключается в том, где они размещаются на элементе и как влияют на его размеры. Это поведение контролируется блочной моделью CSS.
Синтаксис и использование border
Границы были стандартом дизайна с самого начала Интернета.
Самый важный синтаксис рамки определяет ее ширину и стиль:
Но для границы доступно больше стилей, и с помощью border-style вы можете определить разные стили для каждой стороны, если хотите.
Когда использовать border
Синтаксис и использование outline
Когда использовать outline
Синтаксис и использование box-shadow
Минимальные требуемые свойства для box shadow являются значениями для x и y оси, и его цвет:
Это создаст вид границы вокруг элемента и может даже следовать за примененным border-radius :
Когда использовать box-shadow
Вы можете предпочесть box-shadow особенно, если хотите анимировать границу, не вызывая сдвига макета. В следующем разделе будет продемонстрирован пример этого контекста.
А так как box-shadow может быть многослойным, это универсальный хороший инструмент для улучшения ваших макетов.
Собираем все вместе
Вот несколько практических сценариев, когда вам может потребоваться border альтернативный вариант.
Границы кнопок
В этом случае мы можем использовать box-shadow для создания псевдо-границы, чтобы истинные размеры не увеличивались, плюс мы можем анимировать ее, используя transition :
Вот сокращенный код для приведенного выше примера:
Обновление метода отладки CSS
Классическая шутка CSS заключается в том, что для решения проблем CSS, особенно при прокрутке или позиционировании переполнения, нужно добавить:
Это добавит красную рамку к каждому элементу.
Но, как мы узнали, это также повлияет на их вычисленные размеры, что может случайно вызвать дополнительные проблемы.
Вместо этого используйте:
Одним из возможных последствий использования border является добавление полос прокрутки после перерисовки содержимого. При использовании outline этого побочного эффекта не будет.
Кроме того, вы, вероятно, уже будете использовать border для элементов, поэтому повсеместное изменение border приведет к сдвигам макета, которые, безусловно, могут вызвать новые проблемы.
Обеспечение видимого фокуса
Чтобы устранить это негативное влияние, вы можете нанести transparent контур :focus :
Подводные камни outlineи box-shadow
Поскольку outline и box-shadow находятся за пределами границы в блочной модели, вы можете столкнуться с одним из последствий, когда они исчезают за краями области просмотра. Таким образом, вам, возможно, потребуется добавить margin к элементу или padding к body в качестве контрмеры, если вы хотите, чтобы он оставался видимым.
Дополнительный совет: Градиентные границы
Чтобы разместить границу только с одной стороны, сначала обязательно установите нулевые значения для других сторон, иначе некоторые браузеры все равно будут добавлять ее со всех сторон: