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

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