尽管兼容（显然？），但剪辑路径在 Firefox 中不起作用答案

【问题标题】：Clip-path is not working in firefox despite being compatible (aparently?)尽管兼容（显然？），但剪辑路径在 Firefox 中不起作用
【发布时间】：2017-05-03 01:02:45
【问题描述】：

我无法获取 Firefox 工作的剪辑路径。据我所知，它是兼容的，虽然我不知道它为什么不工作，而且据我所知，这不是一个很常见的问题。它在铬上运行良好。我有什么遗漏吗？

#rectangle {
    transform-origin: top left;
    padding-right:200px;
    top:70px;
    -webkit-clip-path:inset(0px 100% 0px 0px);
    clip-path:inset(0px 100% 0px 0px);
}

【问题讨论】：

greensock.com/forums/topic/…
我昨天刚刚创建了一个，语法相同，事实上，它在 FF 中根本不起作用。我也尝试过“掩码”语法，它甚至无法在 Chrome 中正常工作。剪辑路径根本不适合使用。

标签： css cross-browser clip-path

【解决方案1】：

我也遇到了同样的问题。如果您滚动到 Clip-Path MDN 页面底部 https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path 可以看到，尽管文章本身的一些示例标记中使用了 inset，但 Mozilla (Gecko) 并不支持 inset。

以下是其进展的脚注... [5] 自 Gecko 47 (Firefox 47.0 / Thunderbird 47.0 / SeaMonkey 2.44) 起，此功能在首选项 layout.css.clip-path-shapes.enabled 之后实现，默认为 false。除了 inset() 之外的基本形状在 bug 1075457 中实现，inset() 在 bug 1246762 中实现。从 Gecko 53（Firefox 53.0 / Thunderbird 53.0 / SeaMonkey 2.50）开始，在 Nightly 和 Developer Edition 上，首选项默认为 true（bug 1303654），因为Gecko 54 (Firefox 54.0 / Thunderbird 54.0 / SeaMonkey 2.51) 在 Beta 和 Stable 版本 bug 1247229 上也默认为 true。

一种可能的解决方法是使用多边形而不是插入来创建矩形剪辑。希望这会有所帮助，并且可能其他人可以在这里提供更好的答案，因为我仍然很好奇并想出解决方法。也许有一个 polyfill？

【讨论】：