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">

注意:这与剪辑路径上的这个问题不同,不适用于chrome,因为它特别询问如何使用SVG(而不是CSS)应用剪辑路径

根据我可以使用,它应该在chrome中工作.

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开始更新,现在支持没有供应商前缀的剪辑路径,但许多其他浏览器仍然需要使用,-webkit-clip-path所以现在包含它更安全.

这是CanIUse的快照(截至2017年),部分支持浏览器右上角的其他详细信息通常表明需要-webkit-前缀

进一步阅读: