1

我无法获得 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);
}
4

1 回答 1

0

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

以下是其进展的脚注... [5] 此功能在偏好 layout.css.clip-path-shapes.enabled 之后实现，默认为 false，自 Gecko 47 (Firefox 47.0 / Thunderbird 47.0 / SeaMonkey 2.44) . 除了 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 和稳定版 bug 1247229 上也默认为 true。

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

于 2017-05-02T17:02:45.807 回答