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;
Применяется ко всем элементам
Спецификации¶
Поддержка браузерами¶
Описание и примеры¶
#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 */
}