outline none что это
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 полупрозрачная рамка вокруг картинки
Самый простой способ на края изображения наложить полупрозрачный фон 
Руководство по свойству 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
Разработка сайтов для бизнеса
Если у вас есть вопрос, на который вы не знаете ответ — напишите нам, мы поможем разобраться. Мы всегда рады интересным знакомствам и новым проектам.
К онтур элемента: Outline
С войство OUTLINE
Outline — сокращённая форма записи свойств, которая задаёт общий контур элемента. Контуры не влияют на размещение элементов, они могут быть неправильной формы.
В примере мы задали ширину, стиль и цвет контура элемента «kontur», используя сокращенную форму записи — свойство Outline:
Outline-color
Свойство задает цвет контура элемента. И, хотя значением по умолчанию выступает invert, его лучше задать самому.
• Цвет
• invert — автоматически задаёт цвет контура для достижения контраста с окружающим фоном элемента. Однако спецификация CSS 2.1 оставляет «свободу выбора» браузерам, которые обычно используют значение свойства Color, заданное для самого элемента.
• inherit — наследование от родительского элемента.
Outline-style
Свойство определяет стиль контура элемента.
• none — не отображает контура.
• inherit — наследование от родительского элемента.
Остальные значения свойства Outline-style схожи со свойством Border-style, но в отличие от него не влияют на размещение элемента. Иллюстрация наглядно демонстрирует стили контура элемента:
Outline-width
Свойство задает ширину контура элемента, которое работает только в случае, если задан стиль контура — т.е. свойство Outline-style имеет значение отличное от none.
Ширину контура можно указывать в разных единицах, принятых в CSS, удобнее всего в px.
• thin — узкая линия, как правило, шириной в 1 px.
• medium — средней толщины.
• thick — широкая.
• inherit — наследование от родительского элемента.
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 цветовые модели.