Вставка Clip-Path в CSS не работает в chrome

Question

Я пытаюсь использовать свойство CSS clip-path, но я получаю ошибку Invalid property value в Chrome.

Вот небольшой демо:

.clip-me { 
 
    clip-path: inset(0px 50px 50px 0px); /* top, right, bottom, left */ 
 
}

<img class="clip-me" src="http://i.stack.imgur.com/MnWjF.png" width="100">

Примечание: Это отличается от этого вопроса на clip-path does not work with chrome, потому что это конкретные (не CSS)

Согласно Могу ли я использовать, это should work in chrome.

Answer 1

Оказывается, я просто нужен префикс -webkit- (хотя я не вижу в этом списке vendor prefixes)

.clip-me {   /* top, right, bottom, left */ 
 
    -webkit-clip-path: inset(0px 50px 50px 0px); 
 
      clip-path: inset(0px 50px 50px 0px); 
 
}

<img class="clip-me" src="http://i.stack.imgur.com/MnWjF.png" width="100">

Дополнение от Chrome 55, клип -path без префикса поставщика теперь поддерживается, но многие другие браузеры по-прежнему требуют использования -webkit-clip-path, поэтому теперь безопаснее включать его.

Вот снимок CanIUse (по состоянию на 2017 г.), с дополнительной информацией в верхнем правом углу частичными поддержки браузеров часто указывает на необходимость -webkit- приставкой

Далее Reading:

• Clipping in CSS and SVG — The clip-path Property and <clipPath> Element
• Using clip-path