CSS中的Clip-Path Inset在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网站，chrome浏览器应该支持此功能。

- KyleMit

Answer 1

结果证明我只需要使用-webkit-前缀 (虽然我在这个厂商前缀列表中没有看到它)

.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之后的现在，clip-path已经支持无需使用供应商前缀，但许多其他浏览器仍然需要使用-webkit-clip-path，因此目前最安全的做法是将其包含在内。

这里是CanIUse的快照（截至2017年），附加的细节内容显示了部分支持浏览器通常需要使用-webkit-前缀。

更多阅读材料:

• CSS和SVG中的剪切 - clip-path属性和<clipPath>元素
• 使用clip-path

- KyleMit

---

甚至可以进一步阅读：Lea Verou的PrefixFree。 - Andrea Ligios

从什么时候开始，顺时针从右上角到左下角不是用x1，y1，x2，y2来表示了？ - Loïc