Определение clip-path
CSS свойство clip-path позволяет привязать элемент к базовой фигуре или к источнику SVG.
Примечание: CSS свойство clip-path заменяет устаревшее свойство clip.
| Значение по умолчанию: | none |
|---|---|
| Унаследовано: | no |
| Анимируемый: | yes for basic-shape. Читайте о animatable Попробуй |
| Версия: | CSS Masking Module Level 1 |
| JavaScript синтаксис: | object.style.clipPath="circle(50%)" Попробуй |
Поддержка clip-path
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| clip-path | 55.0 23.0-webkit- |
79.0 | 3.5 | 9.1 6.1-webkit- |
42.0 15.0-webkit- |
Синтаксис clip-path
clip: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none|initial|inherit;
Значения clip-path
| Значение | Описание | Демонстрация |
|---|---|---|
| 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 | Использует fill-box в качестве справочного бокса | |
| stroke-box | Использует stroke-box в качестве справочного бокса | |
| view-box | Использует view-box SVG в качестве справочного бокса | |
| none | Это значение по умолчанию. Отсечение не выполняется | |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |