В процессе перевода.

Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

CSS свойство clip-path создает ограниченную область, которая определяет какая часть элемента должна быть видимой. Те части, которые находятся внутри области, видимы, в то время как части вне области, скрыты. Обрезанная область - это траектория, определяемая либо как внутренняя ссылка, либо как внешний SVG , либо как фигура, такая как круг (circle()).

Историческая справка: Свойство clip-path заменило устаревшее свойство clip .

/* Keyword values */
clip-path: none;

/* Image values */ 
clip-path: url(resources.svg#c1);

/* Box values */
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;

/* Geometry values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

/* Box and geometry values combined */
clip-path: padding-box circle(50px at 0 100px);

/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;

Начальное значениеnone
Применяется квсе элементы; в SVG, это применяется к контейнерам, исключая элемент defs и все графические элементы
Наследуетсянет
Процентыrefer to reference box when specified, otherwise border-box
Отображениевизуальный
Обработка значениякак указано, но с абсолютными значениями url
Animation typeда, как указано для basic-shape, иначе нет
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Синтаксис

Свойство clip-path определяется как одно или комбинация значений перечисленных ниже.

Значения

url()
Представляет URL ссылку на траекторию, ограничивающую элемент.
inset(), circle(), ellipse(), polygon()
Функция <basic-shape>. Размер и положение области определяется значением <geometry-box>. Если геометрия не определена,border-box будет использоваться в качестве блока.
<geometry-box>
Если определен в комбинации с <basic-shape>, это значение определяет блок для базовой области. Если задан самостоятельно, определяет границы блока, включая формирование углов (такое как border-radius). Геометрия может быть определена с помощью одного из следующих значений:  
fill-box
Использует границы объекта в качестве базовой области.
stroke-box
Использует stroke bounding box в качестве базовой области.
view-box
Использует ближайший SVG viewport в качестве базового блока. Если отриут viewBox определен для элемента, создающего SVG viewport, базовый блок позиционируется в оригинальной системе координат, установленной атрибутом viewBox и ширина и высота базового блока устанавливаются равными значениям атрибута viewBox.​​​​​​​
margin-box
Использует margin box в качестве базового блока.
border-box
Использует border box в качестве базового блока.
padding-box
Использует padding box в качестве базового блока.
content-box
Использует content box в качестве базового блока.
none
Обрезанная область не создается.

Формальный синтаксис.

<clip-source> | [ <basic-shape> || <geometry-box> ] | none

где
<clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

где
<inset()> = inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )
<circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )
<ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
<polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
<shape-box> = <box> | margin-box

где
<length-percentage> = <length> | <percentage>
<shape-radius> = <length-percentage> | closest-side | farthest-side
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<fill-rule> = nonzero | evenodd
<box> = border-box | padding-box | content-box

Примеры

/* Inline SVG  */
.target {
  clip-path: url(#c1);
}

/* External SVG */
.anothertarget {
  clip-path: url(resources.svg#c1);
}

/* Circle shape */
.circleClass {
  clip-path: circle(15px at 20px 20px);
}

Живой пример

HTML

<img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
    alt="MDN logo">
<svg height="0" width="0">
  <defs>
    <clipPath id="cross">
      <rect y="110" x="137" width="90" height="90"/>
      <rect x="0" y="110" width="90" height="90"/>
      <rect x="137" y="0" width="90" height="90"/>
      <rect x="0" y="0" width="90" height="90"/>
    </clipPath>
  </defs>
</svg>

<select id="clipPath">
  <option value="none">none</option>
  <option value="circle(100px at 110px 100px)">circle</option>
  <option value="url(#cross)" selected>cross</option>
  <option value="inset(20px round 20px)">inset</option>
</select>

CSS

#clipped {
  margin-bottom: 20px;
  clip-path: url(#cross);
}

Результат

Спецификации

Спецификация Статус Комментарий
CSS Masking Module Level 1
Определение 'clip-path' в этой спецификации.
Кандидат в рекомендации Extends its application to HTML elements.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
Определение 'clip-path' в этой спецификации.
Рекомендация Initial definition (applies to SVG elements only).

Совместимость

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidiOS SafariSamsung Internet
Базовая поддержка
Экспериментальная
Chrome Полная поддержка 55
Полная поддержка 55
Полная поддержка 24
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Нет поддержки НетFirefox Полная поддержка 3.5IE Нет поддержки НетOpera Полная поддержка 42Safari Нет поддержки НетWebView Android Полная поддержка 55Chrome Android Полная поддержка 55
Полная поддержка 55
Полная поддержка Да
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Mobile Нет поддержки НетFirefox Android Полная поддержка 4Opera Android Полная поддержка 42Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 6.0
Полная поддержка 6.0
Полная поддержка Да
С префиксом
С префиксом Требует вендорный префикс: -webkit-
On SVG elementsChrome Полная поддержка 55Edge Полная поддержка 15
Замечания
Полная поддержка 15
Замечания
Замечания Edge only supports clip paths defined by url().
Firefox Полная поддержка 52IE Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания Internet Explorer only supports clip paths defined by url().
Opera Полная поддержка 42Safari Нет поддержки НетWebView Android Полная поддержка 55Chrome Android Полная поддержка 55Edge Mobile Полная поддержка 12
Замечания
Полная поддержка 12
Замечания
Замечания Edge only supports clip paths defined by url().
Firefox Android Полная поддержка 52Opera Android Полная поддержка 42Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 6.0
<basic-shape>Chrome Полная поддержка 55Edge Нет поддержки НетFirefox Полная поддержка 54
Полная поддержка 54
Нет поддержки 47 — ?
Отключено
Отключено From version 47: this feature is behind the layout.css.clip-path-shapes.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка 42Safari Нет поддержки НетWebView Android Полная поддержка 55Chrome Android Полная поддержка 55Edge Mobile Нет поддержки НетFirefox Android Полная поддержка 54
Полная поддержка 54
Нет поддержки 47 — ?
Отключено
Отключено From version 47: this feature is behind the layout.css.clip-path-shapes.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 42Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 6.0
path()Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Полная поддержка 63
Отключено
Полная поддержка 63
Отключено
Отключено From version 63: this feature is behind the layout.css.clip-path-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетEdge Mobile Нет поддержки НетFirefox Android Полная поддержка 63
Отключено
Полная поддержка 63
Отключено
Отключено From version 63: this feature is behind the layout.css.clip-path-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
AnimationsChrome Полная поддержка 55Edge Нет поддержки НетFirefox Полная поддержка 49IE Нет поддержки НетOpera Полная поддержка 42Safari Нет поддержки НетWebView Android Полная поддержка 55Chrome Android Полная поддержка 55Edge Mobile Нет поддержки НетFirefox Android Полная поддержка 49Opera Android Полная поддержка 42Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 6.0
fill-box and stroke-boxChrome Нет поддержки НетEdge Нет поддержки НетFirefox Полная поддержка 51
Замечания
Полная поддержка 51
Замечания
Замечания This value was supported before Firefox 51, but as an alias to border-box.
IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетEdge Mobile Нет поддержки НетFirefox Android Полная поддержка 51
Замечания
Полная поддержка 51
Замечания
Замечания This value was supported before Firefox 51, but as an alias to border-box.
Opera Android ? Safari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

Смотрите также

Метки документа и участники

Внесли вклад в эту страницу: fscholz, torbasow, AntonPanteleev
Обновлялась последний раз: fscholz,