Question

我无法获得firefox工作的剪辑路径。据我所知它是兼容的，虽然我无法弄清楚为什么它不起作用，据我所知，这不是一个非常普遍的问题。它在chrome上运行良好。我有什么遗失的吗？

#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);
}

Answer 1

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

以下是其进展的脚注...... [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（bug 1303654）的偏好默认为true，因为Gecko 54（Firefox 54.0 / Thunderbird 54.0 / SeaMonkey 2.51）在Beta和Stable版本的bug 1247229上也默认为true。

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

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

1 个答案: