`mask-border-width` CSS-свойство

Базовая поддержка Ограниченная доступность

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

Свойство mask-border-width CSS задаёт ширину границы маски элемента.

Синтаксис

/* Keyword value */
mask-border-width: auto;

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

/* <percentage> value */
mask-border-width: 25%;

/* <number> value */
mask-border-width: 3;

/* top and bottom | left and right */
mask-border-width: 2em 3em;

/* top | left and right | bottom */
mask-border-width: 5% 15% 10%;

/* top | right | bottom | left */
mask-border-width: 5% 2em 10% auto;

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

Свойство mask-border-width можно указать с помощью одного, двух, трёх или четырёх значений, выбранных из приведённого ниже списка.

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

Значения

<length-percentage>: Ширина границы маски, заданная как <length> или <percentage>. Проценты отсчитываются от ширины области границы для горизонтальных смещений и от высоты области границы для вертикальных смещений. Значение не должно быть отрицательным.
<number>: Ширина границы маски, заданная как кратное соответствующего значения border-width. Значение не должно быть отрицательным.
auto: Ширина границы маски становится равной внутренней ширине или высоте (в зависимости от применимого случая) соответствующего mask-border-slice. Если у изображения нет необходимого внутреннего размера, вместо него используется соответствующее значение border-width.

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

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

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

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

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

Примеры

Основы использования

mask-border-width задаёт ширину маски границы — если установить другое значение, отличное от mask-border-slice, срезы будут масштабированы, чтобы соответствовать маске границы.

/* Final mask scaled down to 20px wide */
mask-border-slice: 30 fill;
mask-border-width: 20px;

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

-webkit-mask-box-image-width: 20px;

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

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

Спецификация
Модуль маскирования CSS, уровень 1 # the-mask-border-width

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

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`mask-border-width`	1	79	Нет	15	17.2 3.1	18	Нет	14	17.2 2	1.0	4.4	17.2 2

См. также

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/mask-border-width