mask-border-width

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

Эта функция не относится к 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-slice, вызовет масштабирование фрагментов для соответствия маске границы.

mask-border-width: 30 fill;

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

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

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

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

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

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`mask-border-width`	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-width