Question

我尝试使用CSS属性clip-path，但Chrome中出现Invalid property value错误。

screenshot

这是一个小型演示：

＆＃13;

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

＆＃13;

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

＆＃13;

注意：这与clip-path does not work with chrome上的这个问题不同，因为它专门询问如何使用SVG（而不是CSS）应用剪辑路径

根据我可以使用，should work in chrome。

Answer 1

原来我只需要 -webkit- 前缀（虽然我不会在vendor prefixes列表中看到它）

＆＃13;

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

＆＃13;

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

＆＃13;

从 Chrome 55 更新，现在支持不带供应商前缀的剪辑路径，但许多其他浏览器仍需要使用-webkit-clip-path，因此将其包含在内是更安全的现在。

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

进一步阅读：

CSS中的剪辑路径插入不适用于chrome

1 个答案: