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

score 29 · Accepted Answer

原来我只需要-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-前缀

延伸阅读：

1 回答 1