Свойство CSS `mask-clip`

Свойство 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;

/* 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;

Значения

Свойство принимает список ключевых слов, разделённых запятыми. Каждое значение — это <coord-box> или no-clip:

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

Это ключевое слово обрезает изображение маски по тексту элемента.

Описание

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

Для слоёв маски с изображениями, которые не ссылаются на элемент SVG <mask>, свойство mask-clip определяет область отрисовки маски — область, на которую она воздействует. Отображаемое содержимое элемента будет ограничено этой областью.

Свойство mask-clip не влияет на слой маски с изображением, ссылающийся на элемент <mask>. Атрибуты x, y, width, height и maskUnits элемента <mask> определяют область отрисовки маски, если источник mask-image — это <mask>.

К элементу можно применить несколько слоёв маски. Количество слоёв определяется числом значений, разделённых запятыми, в значении свойства mask-image (даже если значение равно none). Каждое значение mask-clip в списке значений, разделённых запятыми, сопоставляется с соответствующим значением mask-image в том же порядке. Если количество значений в двух свойствах различается, избыточные значения mask-clip не используются. Если же у mask-clip значений меньше, чем у mask-image, значения mask-clip повторяются.

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

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

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

Примеры

Обрезка маски по границам рамки

В этом примере показаны три значения mask-clip.

HTML

Мы добавляем три элемента, каждому из которых в качестве имени класса задаём своё значение <coord-box>.

<div class="border-box"></div>
<div class="padding-box"></div>
<div class="content-box"></div>

CSS

В CSS для элемента задаются фон, рамка, внутренние и внешние отступы, а также изображение маски. Для каждого <div> задано своё значение <coord-box>. Мы добавили генерируемое содержимое с именем класса и сдвинули этот текст вверх на 10px, чтобы маска не скрывала его.

div {
  width: 100px;
  height: 100px;
  background-color: #8cffa0;
  margin: 10px;
  border: 20px solid #8ca0ff;
  padding: 20px;
  mask-image: url("https://mdn.github.io/shared-assets/images/examples/mdn.svg");
  mask-size: 100% 100%;
}
.content-box {
  mask-clip: content-box;
}
.border-box {
  mask-clip: border-box;
}
.padding-box {
  mask-clip: padding-box;
}
div::before {
  content: attr(class);
  position: relative;
  top: -10px;
}

body {
  display: flex;
  flex-flow: row wrap;
}

Результаты

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

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

См. также

• сокращённое свойство mask
• mask-image
• mask-origin
• mask-position
• mask-repeat
• mask-size
• mask-border
• clip-path
• background-clip
• Введение в обрезку в CSS
• Введение в маскирование в CSS
• Свойства маски CSS mask
• Задание нескольких масок
• модуль маскирования CSS