CSS 中的剪辑路径插入在 chrome 中不起作用

Question

我正在尝试使用 CSS 属性 clip-path，但在 Chrome.

中出现 Invalid property value 错误

这是一个小演示：

.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 上的这个问题不同，因为它专门询问如何使用 SVG 应用剪辑路径（不是 CSS）

根据Can I Use，它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">

从 Chrome55 更新，现在支持不带供应商前缀的剪辑路径，但许多其他浏览器仍然需要使用 -webkit-clip-path，所以它是现在包含它更安全。

这是 CanIUse（截至 2017 年）的快照，部分支持浏览器右上角的附加详细信息通常表明需要 -webkit-前缀

进一步阅读:

Clip-Path Inset in CSS not working in chrome