outline-style

Базовая линия Широкодоступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с апреля 2017 года.

Свойство outline-style CSS задаёт стиль обводки элемента. Обводка — это линия, нарисованная вокруг элемента, вне border.

Попробовать

Часто удобнее использовать сокращённое свойство outline при определении внешнего вида обводки.

Синтаксис

/* Keyword values */
outline-style: auto;
outline-style: none;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;

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

Свойство outline-style задаётся одним из значений, перечисленных ниже.

Значения

auto: Разрешает пользовательскому агенту отображать собственный стиль обводки.
none: Обводка не используется. outline-width равна 0.
dotted: Обводка — это ряд точек.
dashed: Обводка — это ряд коротких отрезков линий.
solid: Обводка — это одна линия.
double: Обводка — это две сплошные линии. outline-width равна сумме ширины двух линий и промежутка между ними.
groove: Обводка выглядит так, словно она была выгравирована на странице.
ridge: Противоположность groove: обводка выглядит так, словно она была выступом на странице.
inset: Обводка заставляет рамку выглядеть так, словно она была вставлена в страницу.
outset: Противоположность inset: обводка заставляет рамку выглядеть так, словно она выступает со страницы.

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

Начальное значение	`none`
Применяется к	всем элементам
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	по типу вычисленного значения

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

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

Примеры

Установка стиля обводки на auto

Значение auto указывает на пользовательский стиль обводки, описанный в спецификации как "обычно стиль [который] является пользовательским интерфейсом по умолчанию для платформы или, возможно, стилем, который богаче, чем можно описать в CSS, например, обводка с закругленными краями с полупрозрачными внешними пикселями, которые кажутся светящимися".

HTML

<div>
  <p class="auto">Outline Demo</p>
</div>

CSS

.auto {
  outline-style: auto; /* same result as "outline: auto" */
}

/* To make the Demo clearer */
* {
  outline-width: 10px;
  padding: 15px;
}

Результат

Установка стиля обводки на пунктирную и точечную

HTML

<div>
  <div class="dotted">
    <p class="dashed">Outline Demo</p>
  </div>
</div>

CSS

.dotted {
  outline-style: dotted; /* same result as "outline: dotted" */
}
.dashed {
  outline-style: dashed;
}

/* To make the Demo clearer */
* {
  outline-width: 10px;
  padding: 15px;
}

Результат

Установка стиля обводки на сплошную и двойную

HTML

<div>
  <div class="solid">
    <p class="double">Outline Demo</p>
  </div>
</div>

CSS

.solid {
  outline-style: solid;
}
.double {
  outline-style: double;
}

/* To make the Demo clearer */
* {
  outline-width: 10px;
  padding: 15px;
}

Результат

Установка стиля обводки на бороздчатую и гребневидную

HTML

<div>
  <div class="groove">
    <p class="ridge">Outline Demo</p>
  </div>
</div>

CSS

.groove {
  outline-style: groove;
}
.ridge {
  outline-style: ridge;
}

/* To make the Demo clearer */
* {
  outline-width: 10px;
  padding: 15px;
}

Результат

Установка стиля обводки на углубленную и выступающую

HTML

<div>
  <div class="inset">
    <p class="outset">Outline Demo</p>
  </div>
</div>

CSS

.inset {
  outline-style: inset;
}
.outset {
  outline-style: outset;
}

/* To make the Demo clearer */
* {
  outline-width: 10px;
  padding: 15px;
}

Результат

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

Спецификация
CSS Basic User Interface Module Level 4 # outline-style

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

	Рабочий стол					Мобильный телефон
	Хром	Эдж	Файрфокс	Опера	Сафари	Хром для Android	Файрфокс для Android	Опера для Android	Сафари на iOS	Samsung Internet	WebView Android
`outline-style`	1	12	1.5 До Файрфокса 88, контур не соответствовал форме `border-radius`. 1–3.6	7	1.2	18	4 До Файрфокса 88, контур не соответствовал форме `border-radius`.	10.1	1	1.0	2
`auto`	1	12	1.5	15	1.2	18	4	14	1	1.0	4.4
`dashed`	1	12	1	15	1.2	18	4	14	1	1.0	4.4
`dotted`	1	12	1	15	1.2	18	4	14	1	1.0	4.4
`double`	1	12	1	15	1.2	18	4	14	1	1.0	4.4
`groove`	1	12	1	15	1.2	18	4	14	1	1.0	4.4
`inset`	1	12	1	15	1.2	18	4	14	1	1.0	4.4
`none`	1	12	1	15	1.2	18	4	14	1	1.0	4.4
`outset`	1	12	1	15	1.2	18	4	14	1	1.0	4.4
`ridge`	1	12	1	15	1.2	18	4	14	1	1.0	4.4
`solid`	1	12	1	15	1.2	18	4	14	1	1.0	4.4

См. также

© 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-style