mask-border-outset

Ограниченная доступность

Эта функция не относится к Baseline, так как она не работает в некоторых из самых широко используемых браузеров.

Свойство mask-border-outset CSS определяет расстояние, на которое граница маски элемента смещена от его рамки.

Синтаксис

/* <length> value */
mask-border-outset: 1rem;

/* <number> value */
mask-border-outset: 1.5;

/* top and bottom | left and right */
mask-border-outset: 1 1.2;

/* top | left and right | bottom */
mask-border-outset: 30px 2 45px;

/* top | right | bottom | left */
mask-border-outset: 7px 12px 14px 5px;

/* Global values */
mask-border-outset: inherit;
mask-border-outset: initial;
mask-border-outset: revert;
mask-border-outset: revert-layer;
mask-border-outset: unset;

Свойство mask-border-outset может быть задано одним, двумя, тремя или четырьмя значениями. Каждое значение — это <length> или <number>. Отрицательные значения недопустимы.

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

Значения

<length>: Размер смещения границы маски как размер.
<number>: Размер смещения границы маски как кратное соответствующей border-width.

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

Начальное значение	`0`
Применимо к	всем элементам; в SVG, к контейнерным элементам, за исключением элемента `<defs>` и всех графических элементов
Наследуется	нет
Вычисляемое значение	как указано, но относительные длины преобразуются в абсолютные
Тип анимации	дискретный

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

mask-border-outset = 
  [ <length> | <number> ]{1,4}

Примеры

Базовое использование

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

mask-border-outset: 1rem;

Браузеры на основе Chromium поддерживают устаревшую версию этого свойства — mask-box-image-outset — с префиксом:

-webkit-mask-box-image-outset: 1rem;

Примечание: На странице mask-border представлен рабочий пример (использующий устаревшие префиксные свойства маски границы, поддерживаемые в Chromium), чтобы вы могли получить представление об эффекте.

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

Спецификация
CSS Masking Module Level 1 # the-mask-border-outset

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

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`mask-border-outset`	1	79	Нет	15	17.23.1	18	Нет	14	3	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/mask-border-outset