Question

我的标记中有一张图片：

<img src="http://img-url/img.jpg" />

这是我的CSS：

img {
  clip-path: polygon(70% 0%, 60% 40%, 90% 90%, 0% 50%) fill-box;
}

如果删除fill-box部分，它会起作用。那么，我是以错误的方式使用它吗？ MDN的语法似乎是：

<clip-source> | [ <basic-shape> || <geometry-box> ] | none
where 
<clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

链接到该属性：https://developer.mozilla.org/en/docs/Web/CSS/clip-path

我没有正确使用它吗？我需要改变什么？

Answer 1

基本上，原因是浏览器不支持您尝试使用的功能。

您引用的MDN文档很好，但并不能真正解释浏览器支持位置，尽管该文章的确开始时警告它仍然是“实验性技术”。

WebPlatform是另一个很好的参考，它的docs for clip-path甚至没有提到填充框。

您可能还会发现，与常规HTML元素相比，支持的剪辑语法在SVG中有所不同，即使在同一浏览器中也是如此。特别是，填充和描边是SVG属性，因此在HTML上下文中使用fill-box或stroke-box可能有意义，也可能没有意义。

这些边缘案例语法的浏览器支持可能会随着时间的推移而改进，但是现在我建议的最佳选择是减少使用当前浏览器的语法。

Answer 2

正确的语法是

`img {
  clip-path: polygon(70% 0%, 60% 40%, 90% 90%, 0% 50%);
}`

或

`img {
  clip-path: fill-box;
}`

因为fill-box是关键字值。如果您使用的是基于webkit的浏览器，请尝试

`img {
  -webkit-clip-path: fill-box;
}`

Answer 3

如果你转到the compatibility chart，你会发现你可能需要供应商前缀。

如果您使用的是Chrome或Firefox，则需要使用-web-kit-clip-path。

为什么以下CSS规则不起作用？

3 个答案: