mask-clip

Baseline 2023

Новое

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

Свойство mask-clip CSS определяет область, на которую влияет маска. Визуальное содержимое элемента должно быть ограничено этой областью.

Синтаксис

/* <coord-box> values */
mask-clip: content-box;
mask-clip: padding-box;
mask-clip: border-box;
mask-clip: fill-box;
mask-clip: stroke-box;
mask-clip: view-box;

/* Keyword values */
mask-clip: no-clip;

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

/* Multiple values */
mask-clip: padding-box, no-clip;
mask-clip: view-box, fill-box, border-box;

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

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

Значения

content-box: Отображаемое содержимое обрезается до области содержимого.
padding-box: Отображаемое содержимое обрезается до области отступов.
border-box: Отображаемое содержимое обрезается до области рамки.
fill-box: Отображаемое содержимое обрезается до ограничивающей рамки объекта.
stroke-box: Отображаемое содержимое обрезается до ограничивающей рамки контура.
view-box: Использует ближайший SVG-видоизмеритель в качестве эталонной области. Если для элемента, создающего SVG-видоизмеритель, указан атрибут viewBox, эталонная область размещается в начале системы координат, установленной атрибутом viewBox, и размеры эталонной области устанавливаются значениями ширины и высоты атрибута viewBox.
no-clip: Отображаемое содержимое не обрезается.
border: Это ключевое слово ведет себя так же, как border-box.
padding: Это ключевое слово ведет себя так же, как padding-box.
content: Это ключевое слово ведет себя так же, как content-box.
text: Это ключевое слово обрезает изображение маски до текста элемента.

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

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

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

mask-clip = 
  [ <coord-box> | no-clip ]#  

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

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

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

Примеры

Обрезка маски до области рамки

Нажмите «Запустить» в интерактивном примере, чтобы открыть код в Playground MDN и изменить значение mask-clip на любое из допустимых значений, описанных выше.

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

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

  mask-image: url(https://mdn.github.io/shared-assets/images/examples/mdn.svg);
  mask-size: 100% 100%;
  mask-clip: border-box;
}

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

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

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`mask-clip`	1201	12079	53	10615	15.44	12018	53	8014	15.43.2	25.01.0	2
`border`	1	79	Нет	15	4	18	Нет	14	3.2	1.0	2
`content`	1	79	Нет	15	4	18	Нет	14	3.2	1.0	2
`padding`	1	79	Нет	15	4	18	Нет	14	3.2	1.0	2
`text`	1	79	Нет	15	4	18	Нет	14	3.2	1.0	2

См. также

Обрезка и маскирование в 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-clip