outline
Что-то вроде border на стероидах. Не влияет на размеры элемента, можно отодвинуть от границ на любое расстояние.
Присутствует в стандартных стилях браузера для акцента на сфокусированных интерактивных элементах. Типа размеры не меняются, вёрстка страницы не ломается, но пользователь наглядно видит, какой элемент в фокусе. Ситуация win-win!
Естественно, можно задавать это свойство любому элементу и без всяких фокусов ��
Пример
Скопировать ссылку «Пример» Скопировано
Добавим элементу обводку, которая будет отодвинута от края на 10 пикселей. Для этого мы используем дополнительное свойство outline — offset . Оно идёт рука об руку с outline .
Зададим обводку шириной 5 пикселей зелёного цвета. Отодвинем её от края элемента на 10 пикселей. Рамку зададим для наглядности.
.block border: 1px solid black; outline: 5px solid green; outline-offset: 10px;>.block border: 1px solid black; outline: 5px solid green; outline-offset: 10px; >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
outline на самом деле шорткат — короткое свойство для записи сразу нескольких значений. Внутри себя оно содержит свойства outline — width , outline — style и outline — color .
Разберём доступные значения для каждого из свойств, а потом соберём всё в одну коробку:
outline — width
Скопировать ссылку «outline-width» Скопировано
- Ключевые слова thin , medium , thick — задают тонкую, среднюю или толстую ширину. Значения в пикселях на усмотрение браузера, но обычно соответствует 1, 3 и 6 пикселям соответственно.
- Конкретный размер — размер в любых единицах измерения, доступных в вебе. Например, 10px или 0 . 2em .
outline — style
Скопировать ссылку «outline-style» Скопировано
- none — обводка не отображается, даже если задано значение для outline — width .
- dotted — обводка будет состоять из точек. Круглых точек, вроде такого •••••
- dashed — обводка будет в виде пунктирной линии.
- solid — значение по умолчанию, если не задано иное. Сплошная линия.
- double — двойная
сплошнаялиния.
Дальше создателей спецификации понесло в творчество и они придумали несколько фигурных обводок. Освещение таких рамок идёт сверху под прямым углом. И на это никак не повлиять:
- groove — обводка будет отображаться так, будто рамка объёмная, с вдавленной серединой и подсвечена. Цвет обводки (если он отличен от чёрного) станет двухцветным.
- ridge — обводка отобразится объёмной, её центр будет приподнят. Противоположно groove .
- inset — объёмная рамка, края направлены внутрь элемента.
- outset — объёмная рамка, края направлены наружу элемента, противоположно inset .
Проще всего понять на примерах:
outline — color
Скопировать ссылку «outline-color» Скопировано
- любое доступное значение цвета в вебе, включая ключевые слова transparent , current Color .
- invert — ключевое слово, устанавливающее противоположный цвету фона элемента цвет обводки. Удобно для достижения максимальной контрастности.
Собираем все значения в шорткат.
Указано одно обязательное значение для outline — style :
.selector outline: solid;>.selector outline: solid; >
outline — color | outline — style :
.selector outline: #f66 dashed;>.selector outline: #f66 dashed; >
outline — style | outline — width :
.selector outline: inset thick;>.selector outline: inset thick; >
outline — color | outline — style | outline — width :
.selector outline: green solid 3px;>.selector outline: green solid 3px; >
Как можно понять из примера выше, для свойства outline можно задать только одно значение, указывающее на стиль обводки. Без него обводка не будет отображаться. Если задано только одно значение, то цвет будет совпадать с цветом текста (подражание ключевому слову current Color ), а размер будет соответствовать ключевому слову medium (что, в свою очередь, равно 3 пикселям).
Заодно посмотрим на доступные значения для outline — offset :
- Может принимать в качестве значения любое указание размера в любых единицах измерения. Можно задать отрицательное значение и тогда обводка будет сдвинута внутрь. Тогда стоит учитывать ширину самой обводки, поскольку свойство outline — offset указывает расстояние от края элемента до внутреннего края обводки.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� В отличие от border обводка всегда квадратная (прямоугольная), её углы нельзя скруглить. На сентябрь 2021 года обводка подстраивается под форму обводимого элемента! �� Во всех актуальных версиях браузеров, кроме Safari ��
�� Обводка без зазрения совести накладывается на рядом стоящие элементы, не замечая их.
�� Если задать обводку для многострочного текста, то каждая строка будет обведена своим прямоугольником. Лучше уж задать обводку для родителя.
На практике
Скопировать ссылку «На практике» Скопировано
Егор Левченко советует
Скопировать ссылку «Егор Левченко советует» Скопировано
��️ Если ваш дизайнер просит сбросить обводку у элементов в фокусе, не пользуйтесь outline : none , даже если это кажется самым простым способом.
Воспользуйтесь свойством outline — color со значением transparent .
Обводка в фокусе пропадёт, если пользователь не включил режим высокой контрастности. В контрастном режиме обводка будет на месте, а вот цвета и красивые дизайнерские тени — нет.
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� Если вам не нравится обводка у элементов при фокусе, то не сбрасывайте её совсем, а попросите дизайнера или придумайте более уместный для вашего сайта стиль.
�� При помощи сочетания border и outline можно создать множественную рамку вокруг элемента.
outline
Универсальное свойство, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырёх сторонах элемента. В отличие от линии, задаваемой через border, у свойства outline есть следующие особенности:
- outline не влияет на размеры и положение самого элемента;
- outline не занимает место, не влияет на окружающие элементы и отображается поверх них;
- нельзя задать параметры линии на отдельных сторонах элемента, outline применяется сразу ко всем четырём сторонам;
- свойство border-radius не действует.
Краткая информация
| Значение по умолчанию | Нет |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Анимируется | Да |
Синтаксис
outline: outline-color || outline-style || outline-width| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
Значения
outline-color Задаёт цвет линии в любом допустимом для CSS формате. outline-style Стиль линии. outline-width Толщина границы.
Пример
Результат данного примера показан на рис. 1.
Рис. 1. Использование свойства outline
Объектная модель
Спецификация
| Спецификация | Статус |
|---|---|
| CSS Basic User Interface Module Level 4 | Рабочий проект |
| CSS Basic User Interface Module Level 3 | Рекомендация |
| CSS Level 2 (Revision 1) | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
| 8 | 12 | 1 | 7 | 1.2 | 1.5 |
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
- :focus для полей формы
- outline-color
- outline-offset
- outline-style
- outline-width
- Свойство border
- Состояния кнопок
Рецепты
Справочник CSS
- !important
- ::after
- ::backdrop
- ::before
- ::first-letter
- ::first-line
- ::marker
- ::placeholder
- ::selection
- :active
- :blank
- :buffering
- :checked
- :default
- :dir
- :disabled
- :empty
- :enabled
- :first-child
- :first-of-type
- :focus
- :focus-within
- :fullscreen
- :hover
- :in-range
- :indeterminate
- :invalid
- :is()
- :lang()
- :last-child
- :last-of-type
- :link
- :muted
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :paused
- :placeholder-shown
- :playing
- :read-only
- :read-write
- :required
- :root
- :seeking
- :stalled
- :target
- :valid
- :visited
- :volume-locked
- @charset
- @document
- @font-face
- @import
- @keyframes
- @media
- @page
- @supports
- @viewport
- accent-color
- align-content
- align-items
- align-self
- all
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- aspect-ratio
- backdrop-filter
- backface-visibility
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-position-x
- background-position-y
- background-repeat
- background-size
- block-size
- border
- border-block
- border-block-color
- border-block-end
- border-block-end-color
- border-block-end-style
- border-block-end-width
- border-block-start
- border-block-start-color
- border-block-start-style
- border-block-start-width
- border-block-style
- border-block-width
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-image
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- bottom
- box-decoration-break
- box-shadow
- box-sizing
- caption-side
- caret-color
- clear
- clip
- color
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- content
- counter-increment
- counter-reset
- cursor
- direction
- display
- empty-cells
- filter
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- font
- font-family
- font-kerning
- font-size
- font-stretch
- font-style
- font-variant
- font-weight
- gap
- height
- hyphenate-character
- hyphenate-limit-chars
- hyphens
- image-rendering
- justify-content
- left
- letter-spacing
- line-clamp
- line-height
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- marks
- max-height
- max-width
- min-block-size
- min-height
- min-width
- mix-blend-mode
- object-fit
- opacity
- order
- orphans
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-x
- overflow-y
- padding
- padding-block
- padding-block-end
- padding-block-start
- padding-bottom
- padding-inline
- padding-inline-end
- padding-inline-start
- padding-left
- padding-right
- padding-top
- page-break-after
- page-break-before
- page-break-inside
- perspective
- perspective-origin
- place-content
- pointer-events
- position
- quotes
- resize
- right
- row-gap
- scroll-behavior
- tab-size
- table-layout
- text-align
- text-align-last
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-skip-ink
- text-decoration-style
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-fill-color
- text-indent
- text-orientation
- text-overflow
- text-shadow
- text-stroke
- text-stroke-color
- text-stroke-width
- text-transform
- top
- transform
- transform-origin
- transform-style
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- unicode-bidi
- user-select
- vertical-align
- visibility
- white-space
- widows
- width
- word-break
- word-spacing
- word-wrap
- writing-mode
- z-index
- zoom
outline-style
Устанавливает стиль внешней границы элемента. В отличие от линии, задаваемой через border, линия через outline отображается вокруг элемента, не влияя на ширину блока или его положение.
Краткая информация
| Значение по умолчанию | none |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Анимируется | Нет |
Синтаксис
outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
Значения
none Граница не отображается. Это значение перекрывает свойство outline-width, если оно присутствует. dotted Линия состоящая из набора точек. dashed Пунктирная линия, состоящая из серии коротких отрезков. solid Сплошная линия. double Двойная линия. groove Создаёт эффект вдавленной рамки. ridge Создаёт эффект рельефной границы. inset Псевдотрёхмерная рамка, при которой правая и нижняя граница осветляется, а левая и верхняя линии затемняются. outset Псевдотрёхмерная рамка, при которой левая и верхняя граница имеют более светлый оттенок, чем заданный цвет, а правая и нижняя линии затемняются.
Вид указанных стилей представлен на рис. 1.
Рис. 1. Вид границы с разным значением стилей
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
none dotted dashed solid double groove ridge inset outset
Пример
В данном примере для браузера убирается пунктирная граница вокруг ссылок, возникающая при их активации. В первом абзаце рамка ещё будет отображаться, а во втором абзаце она скрывается с помощью значения none свойства outline-style .
Объектная модель
Объект.style.outlineStyle
Спецификация
| Спецификация | Статус |
|---|---|
| CSS Basic User Interface Module Level 4 | Рабочий проект |
| CSS Basic User Interface Module Level 3 | Рекомендация |
| CSS Level 2 (Revision 1) | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
| 8 | 12 | 1 | 7 | 1.2 | 1.5 |
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
- :focus для полей формы
- outline
- outline-color
- outline-offset
- outline-width
- Свойство border
- Состояния кнопок
Рецепты
Справочник CSS
- !important
- ::after
- ::backdrop
- ::before
- ::first-letter
- ::first-line
- ::marker
- ::placeholder
- ::selection
- :active
- :blank
- :buffering
- :checked
- :default
- :dir
- :disabled
- :empty
- :enabled
- :first-child
- :first-of-type
- :focus
- :focus-within
- :fullscreen
- :hover
- :in-range
- :indeterminate
- :invalid
- :is()
- :lang()
- :last-child
- :last-of-type
- :link
- :muted
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :paused
- :placeholder-shown
- :playing
- :read-only
- :read-write
- :required
- :root
- :seeking
- :stalled
- :target
- :valid
- :visited
- :volume-locked
- @charset
- @document
- @font-face
- @import
- @keyframes
- @media
- @page
- @supports
- @viewport
- accent-color
- align-content
- align-items
- align-self
- all
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- aspect-ratio
- backdrop-filter
- backface-visibility
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-position-x
- background-position-y
- background-repeat
- background-size
- block-size
- border
- border-block
- border-block-color
- border-block-end
- border-block-end-color
- border-block-end-style
- border-block-end-width
- border-block-start
- border-block-start-color
- border-block-start-style
- border-block-start-width
- border-block-style
- border-block-width
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-image
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- bottom
- box-decoration-break
- box-shadow
- box-sizing
- caption-side
- caret-color
- clear
- clip
- color
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- content
- counter-increment
- counter-reset
- cursor
- direction
- display
- empty-cells
- filter
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- font
- font-family
- font-kerning
- font-size
- font-stretch
- font-style
- font-variant
- font-weight
- gap
- height
- hyphenate-character
- hyphenate-limit-chars
- hyphens
- image-rendering
- justify-content
- left
- letter-spacing
- line-clamp
- line-height
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- marks
- max-height
- max-width
- min-block-size
- min-height
- min-width
- mix-blend-mode
- object-fit
- opacity
- order
- orphans
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-x
- overflow-y
- padding
- padding-block
- padding-block-end
- padding-block-start
- padding-bottom
- padding-inline
- padding-inline-end
- padding-inline-start
- padding-left
- padding-right
- padding-top
- page-break-after
- page-break-before
- page-break-inside
- perspective
- perspective-origin
- place-content
- pointer-events
- position
- quotes
- resize
- right
- row-gap
- scroll-behavior
- tab-size
- table-layout
- text-align
- text-align-last
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-skip-ink
- text-decoration-style
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-fill-color
- text-indent
- text-orientation
- text-overflow
- text-shadow
- text-stroke
- text-stroke-color
- text-stroke-width
- text-transform
- top
- transform
- transform-origin
- transform-style
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- unicode-bidi
- user-select
- vertical-align
- visibility
- white-space
- widows
- width
- word-break
- word-spacing
- word-wrap
- writing-mode
- z-index
- zoom
CSS свойство outline
Свойство outline устанавливает дополнительную рамку вокруг элемента.
outline применяется сразу для всех сторон. Свойство outline похоже на border, но есть множество различий между ними.
В случае границ есть возможность округлить их при помощи свойства border-radius, а при свойстве outline у нас нет такой возможности.
С помощь outline можно создать несколько границ вокруг элемента. Outline — это сокращенное свойство для:
- outline-width
- outline-style
- outline-color
Свойство outline-color не будет работать, если оно применено отдельно.
Толщина и высота элемента не включают толщину линии. Толщина линии должна быть установлена отдельно.
| Значение по умолчанию | medium invert color |
| Применяется | Ко всем элементам, а также к ::first-letter. |
| Наследуется | Нет |
| Анимируемое | Да. Линия элемента анимируема. |
| Версия | CSS2 |
| DOM синтаксис | object.style.outline = «#eee dashed 10px»; |
Синтаксис
outline: outline-width | outline-style | outline-color | initial | inherit;Пример
html> html> head> title>Заголовок документа title> style> p.dotted outline:dotted;> p.dashed outline: dashed;> style> head> body> h2>Пример свойства outline h2> p class="dotted">Lorem Ipsum - это текст-"рыба", часто используемый в печати и веб-дизайне. p> p class="dashed">Lorem Ipsum - это текст-"рыба", часто используемый в печати и веб-дизайне. p> body> html>В вышеприведенном примере для outline-style первого элемента задано значение dotted, а для второго — dashed.
В следующем примере первый элемент не имеет границы, а второе имеет. Заметьте, что линия (outline) второго элемента находится за пределами своей границы:
Пример
html> html> head> title>Заголовок документа title> style> div.ex1 < outline-style: solid; outline-width: thick; > div.ex2 < border: 1px solid #fc7f01; outline-style: solid; outline-width: thick; > style> head> body> h2>Пример свойства outline h2> div class="ex1">Lorem Ipsum - это текст-"рыба", часто используемый в печати и веб-дизайне. div> br> div class="ex2">Lorem Ipsum - это текст-"рыба", часто используемый в печати и веб-дизайне. div> body> html>Пример со свойством outline-color. Линия (outline) находится за пределами границы второго элемента:
Пример
html> html> head> title>Заголовок документа title> style> div.blue < outline-style: solid; outline-color: #1c87c9; > div.green < border: 1px solid black; outline-style: solid; outline-color: #8ebf42; > style> head> body> h2>Пример свойства outline h2> div class="blue">Lorem Ipsum - это текст-"рыба", часто используемый в печати и веб-дизайне div> br> div class="green">Lorem Ipsum - это текст-"рыба", часто используемый в печати и веб-дизайне . div> body> html>Значения
| Значение | Описание |
|---|---|
| outline-width | Устанавливает толщину линии. |
| outline-style | Устанавливает стиль линии. |
| outline-color | Устанавливает цвет линии. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Значение элемента наследуется от родительского элемента. |