CSS中的Clip-Path Inset在chrome中不起作用

Posted 2023-03-05

【中文标题】CSS中的Clip-Path Inset在chrome中不起作用

【英文标题】：Clip-Path Inset in CSS not working in chrome

【发布时间】：2015-04-19 18:08:15

【问题描述】：

我正在尝试使用 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。

【参考方案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">

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

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

进一步阅读：

Clipping in CSS and SVG — The clip-path Property and <clipPath> Element Using clip-path

【讨论】：

Even further reading: Lea Verou 的前缀免费

从什么时候开始是顺时针从左上角到左下角而不是 x1, y1, x2, y2 ？