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

  • Предыдущая страница mask
  • Следующая страница mask-composite

定义和用法

mask-clip 该属性用于指定遮罩图像影响的区域。

实例

展示 mask-clip 不同属性的值：

.masked {
  width: 150px;
  height: 150px;
  background: green;
  border: 30px solid blue;
  padding: 20px;
  -webkit-mask-image: url(img_circle.svg);
  mask-image: url(img_circle.svg);
  mask-size: 100% 100%;
}
.mask1 {
  mask-clip: border-box;
}
.mask2 {
  mask-clip: content-box;
}
.mask3 {
  mask-clip: padding-box;
}
.mask4 {
  mask-clip: fill-box;
}
.mask5 {
  mask-clip: stroke-box;
}

Попробуйте сами

CSS синтаксис

mask-clip: border-box|content-box|padding-box|fill-box|stroke-box|view-box|no-clip|border|padding|content|text|initial|inherit;

Значение атрибута

Значение Описание
border-box Содержимое рисуется и резуется до коробки границ (border box). Значение по умолчанию.
content-box Содержимое рисуется и резуется до коробки содержимого (content box).
padding-box Содержимое рисуется и резуется до коробки отступа (padding box).
fill-box Содержимое рисуется и резуется до коробки объекта (object bounding box).
stroke-box Содержимое рисуется и резуется до контура границ коробки (stroke bounding box).
view-box Использовать ближайший SVG viewport в качестве参照очной коробки.
no-clip Не производить резку.
border Как и border-box.
padding Как и padding-box.
content Как и content-box.
text Распространение маски до текста элемента.
initial Установить этот атрибут в его значение по умолчанию. См. также initial.
inherit Ингеритация этого атрибута из родительского элемента. См. также inherit.

Технические детали

Значение по умолчанию: border-box
Ингеритация: Нет
Создание анимации: Не поддерживается. См. также:Атрибуты, связанные с анимацией.
Версия: Модуль маскирования CSS уровня 1
JavaScript синтаксис: object.style.maskClip="padding-box"

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

Числа в таблице показывают версию первого браузера, который полностью поддерживает этот атрибут.

Кروм Эдж Фаерфокс Сафари Опера
120 120 53 15.4 106

Связанные страницы

Урок:Затемнение CSS

См. также:CSS свойство mask

См. также:CSS свойство mask-composite

См. также:CSS свойство mask-image

См. также:CSS свойство mask-mode

См. также:CSS свойство mask-origin

См. также:CSS свойство mask-position

См. также:CSS свойство mask-repeat

См. также:CSS свойство mask-size

См. также:CSS свойство mask-type

  • Предыдущая страница mask
  • Следующая страница mask-composite