Свойство clip-path CSS

  • Предыдущая страница clip
  • Следующая страница color

Определение и использование

Атрибут clip-path позволяет вырезать элемент до базовой формы или SVG источника.

Комментарий:clip-path заменит废弃ленный атрибут clip.

Пример

Вырезать изображение до 50% круга:

img {
  clip-path: circle(50%);
}

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

CSS синтаксис

clip-path: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none;

Значение свойства

Значение Описание
clip-source Определяет URL, указывающий на элемент SVG <clipPath>.
basic-shape Вырезает элемент до базовой формы: круг, эллипс, многоугольник или звезда.
margin-box Использует рамку отступа (margin box) в качестве рамки.
border-box Использует рамку рамки (border box) в качестве рамки.
padding-box Использует рамку отступа (padding box) в качестве рамки.
content-box Использует рамку содержимого (content box) в качестве рамки.
fill-box Использует рамку объекта (object bounding box) в качестве рамки.
stroke-box Использует рамку контура (stroke bounding box) в качестве рамки.
view-box Использует видимой области SVG в качестве рамки.
none Значение по умолчанию. Не создает путь вырезки.

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

Значение по умолчанию: none
Наследование: Нет
Создание анимации: Поддержка (только для значения basic-shape). См. также:Свойства анимации.
Версия: Модуль маскирования CSS уровня 1
JavaScript синтаксис: object.style.clipPath="circle(50%)"

Поддержка браузеров

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

Chrome IE / Edge Firefox Safari Opera
55.0
23.0 -webkit-		 79.0* 54.0 9.1
6.1 -webkit-		 42.0
15.0 -webkit-

* Edge только поддерживает clip-path на элементах SVG (не поддерживает элементы HTML).

  • Предыдущая страница clip
  • Следующая страница color