описание

Базовая линия 2023

Новое доступно

С марта 2023 года эта функция работает на последних версиях устройств и браузеров. Возможно, эта функция не будет работать на более старых устройствах или браузерах.

Свойство outline CSS сокращенное свойство устанавливает большинство свойств контура в одном объявлении.

Попробовать

Составные свойства

Это свойство является сокращением для следующих свойств CSS:

Синтаксис

/* style */
outline: solid;

/* style | color */
outline: dashed #f66;

/* width | style */
outline: thick inset;

/* width | style | color*/
outline: 3px solid green;

/* Global values */
outline: inherit;
outline: initial;
outline: revert;
outline: revert-layer;
outline: unset;

Свойство outline может быть указано с использованием одного, двух или трех из указанных ниже значений. Порядок значений не имеет значения. Как и для всех сокращенных свойств, любые пропущенные подзначения будут установлены в их начальное значение.

Примечание: Контур будет невидимым для многих элементов, если его стиль не определен. Это потому, что стиль по умолчанию none. Заметным исключением являются input элементы, которым браузеры присваивают стили по умолчанию.

Значения

<'outline-width'>: Устанавливает толщину контура. По умолчанию medium при отсутствии. См. outline-width.
<'outline-style'>: Устанавливает стиль контура. По умолчанию none при отсутствии. См. outline-style.
<'outline-color'>: Устанавливает цвет контура. По умолчанию invert для браузеров, которые его поддерживают, currentcolor для остальных. См. outline-color.

Описание

Контур — это линия за пределами рамки элемента. В отличие от других областей рамки, контуры не занимают места, поэтому они никак не влияют на макет документа.

Есть несколько свойств, которые влияют на внешний вид контура. Можно изменить стиль, цвет и ширину, используя свойство outline , расстояние от границы с помощью свойства outline-offset и углы углов с помощью свойства border-radius.

Контур не обязательно должен быть прямоугольным: при работе с многострочным текстом некоторые браузеры будут рисовать контур для каждой линии блока по отдельности, в то время как другие будут охватывать весь текст одним контуром.

Доступность

Присвоение outline значений 0 или none удалит стандартный стиль фокуса браузера. Если элемент может быть активирован, он должен иметь видимый индикатор фокуса. Предоставьте явное форматирование фокуса, если стандартный стиль фокуса будет удален.

Формальное определение

Начальное значение	как каждое из свойств сокращенного свойства: `outline-width`: `medium` `outline-style`: `none` `outline-color`: `auto`
Применимо к	всем элементам
Унаследованное	нет
Вычисленное значение	как каждое из свойств сокращенного свойства: `outline-width`: абсолютная длина; если указано ключевое слово `none`, вычисленное значение равно `0` `outline-style`: как указано `outline-color`: для ключевого слова `auto`, вычисленное значение `currentcolor`. Для значения цвета, если значение полупрозрачное, вычисленное значение будет соответствующим `rgba()`. Если нет, это будет соответствующее `rgb()` . Ключевое слово `transparent` отображается как `rgba(0,0,0,0)`.
Тип анимации	как каждое из свойств сокращенного свойства: `outline-width`: длина `outline-style`: по типу вычисленного значения `outline-color`: цвет

Формальный синтаксис

outline = 
  <'outline-width'>  ||
  <'outline-style'>  ||
  <'outline-color'>  

<outline-width> = 
  <line-width>  

<outline-style> = 
  auto                  |
  <outline-line-style>  

<outline-color> = 
  auto        |
  <color>     |
  <image-1D>  

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick           

<image-1D> = 
  <stripes()>  

<stripes()> = 
  stripes( <color-stripe># )  

<color-stripe> = 
  <color>                            &&
  [ <length-percentage> | <flex> ]?  

<length-percentage> = 
  <length>      |
  <percentage>

Примеры

Использование контура для установки стиля фокуса

HTML

<a href="#">This link has a special focus style.</a>

CSS

a {
  border: 1px solid;
  border-radius: 3px;
  display: inline-block;
  margin: 10px;
  padding: 5px;
}

a:focus {
  outline: 4px dotted #e73;
  outline-offset: 4px;
  background: #ffa;
}

Результат

Спецификации

Спецификация
CSS Модуль базового пользовательского интерфейса уровня 4 # контур

Совместимость браузеров

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`outline`	94 1–94 До Chrome 94, `outline` не следует форме `border-radius`.	94 12–94 До Edge 94, `outline` не следует форме `border-radius`.	88 1.5–88 До Firefox 88, `outline` не следует форме `border-radius`. 1–3.6	80 7–80 До Opera 80, `outline` не следует форме `border-radius`.	16.4 1.2–16.4 До Safari 16.4, `outline` не следует форме `border-radius`. См. ошибку 20807.	94 18–94 До Chrome 94, `outline` не следует форме `border-radius`.	88 4–88 До Firefox 88, `outline` не следует форме `border-radius`.	10.1	16.4 1–16.4 До Safari 16.4, `outline` не следует форме `border-radius`. См. ошибку 20807.	1.0	94 1–94 До Chrome 94, `outline` не следует форме `border-radius`.

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/outline