mask-origin

Базовая линия 2023

Новое

С декабря 2023 года эта функция работает на всех последних устройствах и версиях браузеров. Возможно, она не будет работать на старых устройствах или браузерах.

Свойство mask-origin CSS задаёт начало маски.

Для элементов, рендерящихся как один блок, это свойство задаёт область позиционирования маски. Другими словами, это свойство задаёт позицию начала изображения, указанного свойством CSS mask-image. Для элементов, рендерящихся как несколько блоков, таких как инлайн-блоки на нескольких строках или блоки на нескольких страницах, оно указывает, на какие блоки box-decoration-break влияет при определении области позиционирования маски.

Синтаксис

/* Keyword values */
mask-origin: content-box;
mask-origin: padding-box;
mask-origin: border-box;
mask-origin: fill-box;
mask-origin: stroke-box;
mask-origin: view-box;

/* Multiple values */
mask-origin: padding-box, content-box;
mask-origin: view-box, fill-box, border-box;

/* Non-standard keyword values */
-webkit-mask-origin: content;
-webkit-mask-origin: padding;
-webkit-mask-origin: border;

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

Одно или несколько ключевых слов из списка ниже, разделённых запятыми.

Значения

content-box: Позиция относительно блока контента.
padding-box: Позиция относительно блока отступа. Для одиночных блоков 0 0 — это верхний левый угол отступа, 100% 100% — нижний правый угол.
border-box: Позиция относительно блока границы.
fill-box: Позиция относительно ограничивающего блока объекта.
stroke-box: Позиция относительно ограничивающего блока обводки.
view-box: Использует ближайший SVG-видовой порт в качестве эталонного блока. Если для элемента, создающего SVG-видовой порт, указан атрибут viewBox, эталонный блок позиционируется в начале системы координат, заданной атрибутом viewBox, и размер эталонного блока устанавливается в соответствии со значениями ширины и высоты атрибута viewBox.
content: То же, что и content-box.
padding: То же, что и padding-box.
border: То же, что и border-box.

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

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

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

mask-origin = 
  <coord-box>#  

<coord-box> = 
  <paint-box>  |
  view-box     

<paint-box> = 
  <visual-box>  |
  fill-box      |
  stroke-box    

<visual-box> = 
  content-box  |
  padding-box  |
  border-box

Примеры

Установка mask origin в border-box

Нажмите «Воспроизвести» в примере, чтобы открыть код в MDN Playground и попробовать другие возможные mask-origin значения.

<div class="masked"></div>

.masked {
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 10px solid blue;
  background-color: #8cffa0;
  padding: 10px;

  mask-image: url(https://mdn.github.io/shared-assets/images/examples/mask-star.svg);
  mask-origin: border-box;
}

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

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

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

	Рабочий стол					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`mask-origin`	1201	12079	53	10615	15.44	12018	53	8014	15.43.2	25.01.0	2
`border`	1	79	Нет	15	15.44	18	Нет	14	15.43.2	1.0	2
`content`	1	79	Нет	15	15.44	18	Нет	14	15.43.2	1.0	2
`fill-box`	120	120	53	106	Нет	120	53	80	Нет	25.0	120
`padding`	1	79	Нет	15	15.44	18	Нет	14	15.43.2	1.0	2
`stroke-box`	120	120	53	106	Нет	120	53	80	Нет	25.0	120
`view-box`	120	120	53	106	Нет	120	53	80	Нет	25.0	120

См. также

Обрезка и маскирование в CSS

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