Перейти к содержанию

mask-clip

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

Отрисовываемое содержимое элемента должно быть ограничено этой областью.

Синтаксис

/* <geometry-box> values */
mask-clip: content-box;
mask-clip: padding-box;
mask-clip: border-box;
mask-clip: margin-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: unset;

Значения

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

  • content-box -- Обрезка производится по контенту (content).
  • padding-box -- Обрезка производится по полям (padding).
  • border-box -- Обрезка производится по рамке (border).
  • margin-box -- Обрезка производится по отступам (margin).
  • fill-box -- Обрезка производится по ограничивающему объекту.
  • stroke-box -- Обрезка производится по рамке ограничивающего объекта.
  • view-box -- используется ближайший SVG viewport.
  • no-clip -- Обрезка не производится.
  • border -- эквивалент border-box.
  • padding -- эквивалент padding-box.
  • content -- эквивалент content-box.
  • text -- Обрезка производится по тексту элемента.

Значение по-умолчанию:

mask-clip: border-box;

Применяется к: ко всем элементам

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

Поддержка браузерами

Can I Use css-masks? Data on support for the css-masks feature across the major browsers from caniuse.com.

Описание и примеры

#masked {
  width: 100px;
  height: 100px;
  background-color: #8cffa0;
  margin: 20px;
  border: 20px solid #8ca0ff;
  padding: 20px;
  mask-image: url('https://mdn.mozillademos.org/files/12668/MDN.svg');
  mask-size: 100% 100%;
  mask-clip: border-box; /* Can be changed in the live sample */
}