Стиль внешней границы

Классы outline-{стиль} задают outline-style — вид линии внешнего контура. Берите их, чтобы включить контур нужного вида или убрать его.

Пример

Под каждым образцом — класс стиля; цвет и отступ задают outline-primary outline-offset-2.

outline-solid

outline-dashed

outline-dotted

outline-4 outline-double

outline-none

HTML

<div class="flex flex-wrap gap-6 items-end">
  <div class="flex flex-col gap-1 items-center">
    <div class="w-e0 h-d8 radius-1 bg-surface-container outline outline-2 outline-offset-2 outline-primary outline-solid"></div>
    <code class="text-1/2 color-on-surface-variant">outline-solid</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <div class="w-e0 h-d8 radius-1 bg-surface-container outline outline-2 outline-offset-2 outline-primary outline-dashed"></div>
    <code class="text-1/2 color-on-surface-variant">outline-dashed</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <div class="w-e0 h-d8 radius-1 bg-surface-container outline outline-2 outline-offset-2 outline-primary outline-dotted"></div>
    <code class="text-1/2 color-on-surface-variant">outline-dotted</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <div class="w-e0 h-d8 radius-1 bg-surface-container outline outline-4 outline-offset-2 outline-primary outline-double"></div>
    <code class="text-1/2 color-on-surface-variant">outline-4 outline-double</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <div class="w-e0 h-d8 radius-1 bg-surface-container outline outline-2 outline-offset-2 outline-primary outline-none"></div>
    <code class="text-1/2 color-on-surface-variant">outline-none</code>
  </div>
</div>

Классы

Класс	CSS	Значения
`outline-solid`	`outline-style: solid`	—
`outline-dashed`	`outline-style: dashed`	—
`outline-dotted`	`outline-style: dotted`	—
`outline-double`	`outline-style: double`	—
`outline-hidden`	`outline-style: hidden`	—
`outline-none`	`outline-style: none`	—

Условия (что это): ширина экрана — нет; состояния — нет.

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Применение

Класс	Линия
`outline-solid`	сплошная
`outline-dashed`	штрихи
`outline-dotted`	точки
`outline-double`	две линии; заметна от толщины `outline-3`
`outline-none`	контура нет

По умолчанию стиль контура — none: без класса стиля или класса outline из ядра контур не рисуется.

HTML

<div class="outline-dashed outline-2 outline-outline outline-offset-4">Место для вставки</div>

Ограничения

outline-hidden в выпуске не действует: значение hidden не допускается для свойства outline-style, и браузер отбрасывает объявление. Чтобы убрать контур, берите outline-none.
outline-none на элементе в фокусе убирает видимый фокус. Не снимайте фокус, не заменив его другим заметным выделением.
Префиксов ширины экрана и состояния у семейства нет.

Навигация

Главное

Документация

Содержание