clip-path
Определение 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 |